Category

website

Looking back at 2015

By | after effects, design, gergwerk, multi touch, multi touch interface, portfolio, Seattle, Stimulant, touch screen, typography, Video, website, website design | No Comments

2015 was a very challenging year. There were many experiences that took me out of my comfort zone. Although difficult, these milestones have allowed me to challenge myself and grow in new ways. Lets take a look back at 2015!

This first project is one I am very honored and proud to have had the opportunity to work on. It was my privilege to design a projection-mapped real-time data visualization for The One World Trade Center in NYC. This 65ft x 16ft (20m x 5m) projection is the first thing visitors see when they walk into the building. This was the first time I utilized Cinema4D to create the visuals. In case you missed it, take a look at my visual and motion design process.
Image by Edward Blake.
One World Observatory lobby projectionone world trade center lobby wall designIt wasn’t long until the Millionth visitor arrived!_
Genentech Lobby Wall: Stimulant built an interactive system for the lobbies of Genentech buildings that would increase employee engagement and feature a wide variety of content. The system blends content from Genentech’s intranet, social media feeds, and building energy statistics. I produced many of the visual designs early on this project.
Image by Stimulant.Genentech Interactive Lobby Display_
AM / PM design: making back ends pretty.  This dashboard allows us to easily manage apps.   gergwerk ampm design gergwerk ampm designHere is what AM / PM used to look like:ampm-screenshot-oldLogo design Process gergwerk ampm logo process_
This year I did a major re-haul of the Gerg Werk branding and website design (although it’s safe to say you’ve already gazed upon it if you’re reading this). View the process post here.mackbook-mockup-02 gergwerk type card Gerg Werk Resume_
Save the date and wedding invites design. View the full work here. gergwerk-savethedate-2015 gergwerk-savethedate02-2015 gergwerk-savethedate03-2015_
World Famous: Produced a range of animation-ready illustration elements. Here is a small snippet of the styles I created:gergwerk style framesDigital Kitchen: I had to opportunity to work with Digital Kitchen as a freelance creative for a few months. Unfortunately due to Non Disclosure Agreements I can’t show any of the work I completed. While here, I brainstormed and conceptualized many innovative ideas for interactive installations, worked on high-profile projects, produced detailed graphic designs, and composited designs in real-world environments. Additionally, I assisted creating client-ready presentations.

Tectonic: While working here, I collaborated closely with the team to rebrand a high-profile company. Our design system scales between television, web, and mobile devices. Due to NDA, I’m unable to show this work.

GERG WERK Redesign

By | brand, brand identity, design, gergwerk, portfolio, process, typography, website, website design | No Comments

gergwerk tablet redesignGerg Werk Resumegergwerk type card Over the last few months I have dedicated myself to revitalizing the Gerg Werk identity. As a large portion of my design practice utilizes motion and video, I wanted to give homage to these aspects in the redesign. I have done this by visualizing the new Gerg Werk logo as a modified keyframe icon. In animation, keyframes mark the start and end of any transition by moving objects at a steady, constant rate. If you want to give the audience a little razzle dazzle, Easing Keyframes will allow objects to move with inertia, style, and elegance. One type of Easing Keyframe is visualized as a hourglass shape. This ‘Bezier’ Keyframe not only represents style and personality, but also resembles a lowercase ‘g’.types of keyframesIn case you were wondering how these keyframe types effect how objects move, I’ve created a short animation below.
Keyframe – the movement is linear, lacks variety in speed by moving objects in a constant rate
Ease Out – will start the animation slowly, and finish at full speed
Ease In – will start the animation at full speed, then finish slowly
Bezier – shares attributes from both easing keyframes. It is this extra style and attention to detail that I hope to continue to include throughout my work.
_
Design elements using the Bezier Keyframe as inspiration for the letter ‘g’. After lots of sketching, I was able to create a larger mark that also utilizes the Bezier Keyframe into the initials GWK – Gerg Werk.gergwerk logomark design_
Process sketch variations:gergwerk-test-pattern gergwerk-test-pattern-detail gergwerk-letterforms

MX: design wireframes

By | multimedia expereince, MX, website, website design | No Comments

sketches, foo.

1.




2.

3.

4.

the problem i am facing deals with legibility between navigation and full size images. if i use a white box to place behind the nav but in front of the image, you loose a bit of the image. if i don’t, i loose the navigation if my image has a black background. it’s also hard to find images that are sized 1024 x 768 exactly. back to ze drawing boards.


MX: website idea wireframes

By | multimedia expereince, MX, portfolio, website, website design | No Comments

to begin, the first screen shows the navigation (info/work/resume/contact) – and a sub navigation (one/two/three) with the first ‘artwork’ (ein) in its rollover state.

the screen looks red. the red stands in as the work itself. use your imagination and pretend the red is my work of art. it’s a full screen image, thus maximizing viewing pleasure.


using keyboard commands, you are able to toggle on and off the navigation, leaving what’s important (the work) left full screened. you are then able to use the arrow keys to sift through the rest of the work (different documented angles) in that section (ein), without having to pull up the navigation.

two.simple navigation ribbons down. the work is shown as a full bleed image (shown as abstract color photo)


press “i” to get the information about the project shown. when the letter “i” is released the information box disappears.

MX_design directions

By | design, information architecture, multimedia expereince, MX, website | One Comment
process post so you people know i ain’t slackin’ foo! the goal is to come up with three variations of navigation, wire framing, and informational architecture that is unique but effective. i’d say we hit the nail on the head.
this wireframe depicts the way the recording device would work on the seed website. simple controls are used to start, stop, add tags, and publish your recording to your profile as well as the advice section of the site. what i was thinking could happen is the other users on the site could download the advice to their computer, or stream it straight to their smart phone (iphone for example) so they can hear the advice as they work in the garden. this saves you many trips to your computer and back outside. it is also a way for the content to be accessed to more than one platform (computer to phone).
wireframe for an ‘amount calculator’ for a smart phone. it allows you to predict how much of a material you will need for the space you have in your garden.

wireframe showing uploading images straight from your phone to your profile or uploading images through your camera to the website. it also shows up in the ‘recent picture’ section of the site automatically. you are encouraged to tag your images so others can narrow their search to more specific results.
this next device is a static camera you attach to your house and it takes a picture in the same spot at the same time every day. the image then is uploaded straight to the picture section in your web page that can be played out in a stop motion. you’re able to see your progress day after day in a quick movie. the more you work, the more people are able to see your achievements.
many iphone applications for the ‘on the go’ gardener. the wireframes show how the transitions from one screen to the next. the arrows indicate what your finger is ‘touching’ on.
after drawing these wireframes and giving the information architecture of the site some serious thought, i started planning how the content and information should be displayed for the users’ benefit. i thought about using the keyboard keys to retrieve navigation elements for the website. we use our keyboards so much, so why not integrate them into websites so we don’t have to use the mouse click. you could move seamlessly from typing a comment on someone’s page then straight to a different page on the website with a simple key command. it’s something i use every day when using photoshop, illustrator, indesign, and after effects. it saves so much time and you will become used to it with muscle memory. i also drew the beginning stages of having content inform the design as well as a customizable page that allows the user to change column width and content on their profile page.
as i was just saying, the user should be able to have (almost) complete control of the content as well as how they interact with the website. it’s going to be the wave of the future. i designed this infrastructure based on the idea that any column width and content box can be added, moved, sized and placed anywhere on the gardening website they want. some things should be kept constant, so the user knows they are still on the gardening site. some things to keep constant might be typefaces, icon system, and our seed logotype.
this sketch shows some different variations of different sections on the website.
here is what i designed based on those concepts. each white area is able to be scaled down or up, moved to areas of the page that are most important to the user. they would be able to create one, two or three column sections to hold the information.
what happens if a user wants to see advice about growing vegetables only? what’s great about this is the idea that different elements from different parts of the site (like this tips/advice section) could be added straight to your portion of your profile. now, instead of navigating to the tips section, they can add the vegetable tab straight to their profile. it’s constantly updating, so new information may seamlessly be streamed onto her profile, without having to go to the tip page. you are also able to move any section of the site up to the main nav bar, if you feel it most important.

a view of a ‘market’ page where users are able to search for supplies/plants/flowers and buy them from the site.

iphone app for layout (1)
wireframe for the iphone app. you drag the icon to the light colored area to activate it (as opposed to clicking it). this might be more natural for the user on the iphone, considering it’s a touch screen device.

the white bar indicates the hit state

another website layout is wire framed here.
the main point to this structure is to have the content of the site be the design. the main page consists of large ribbons tabs. each ribbon is a section of the site. what you see on each ribbon is the newest information (constantly updated by other users) for that portion of the site. for example, on the tips ‘ribbon’, you’re able to see the newest tips users like yourself are writing. they update in real time, which means when someone writes it, it appears on the main page. this allows the user to have an overview of what’s happening in each section of the site, without clicking through each page. what happens if you want to read more from the tips page? when the user wants more information, they can click on the big ribbon (or the links in the ribbon) which slides you to the tips page. the other main navigation remains as condensed ribbon/tabs on the left side of the page. this allows the user to navigate section to section without having to go back to the main page. after determining these rules, i asked my partner laura to design it. this is what it looks like after she added the ‘skin’.
effect of ‘sliding’ over from main page to the users profilepage.
the view of her profile page, with the navigation tabs on the left side of the screen (there will be titles on these tabs for updated versions).
and finally the tips and advice page.
it looks so great!
iphone app i designed for this structure.

white bar indicates hit state
last iphone design for concept three. laura designed everything about this version. can be seen in 1, 2 and 3.

view my partner laura’s process on her blog!