Interface Sketches: Challenge #4

Re-design Instagram. Sketch the re-design with enough detail that it would be understandable to another person. Why does this design work?


IMG_0851.JPG

I began with a bit of research (aka scrolling through my insta feed and seeing how other designers had redesigned insta). The above photo shows all of my initial ideation and brainstorming for the sketches below. I aimed to eliminate a few redundancies and features that I personally don't use. I wanted to condense the written content into a single space, but keep the large, full width visuals. I integrated stories into the newsfeed itself and changed the add photo button so there would be an option to add a story or post from the single button. The overall look is the same, with a few less features and clutter within each page.

IMG_0858.PNG
IMG_0859.PNG
IMG_0860.PNG

Interface Sketches: Challenge #3

Re-design the FaceBook feed page. Sketch 3 different re-designs with enough detail that they would be understandable to another person. Why does this design work (focus on design, not on function).


IMG_4244.JPG
IMG_0980.PNG
IMG_0979.PNG
IMG_0977.PNG
IMG_0978.PNG

When I looked at redesigning the Facebook app, I wanted to use gestures to navigate between screens. The navigational menu page I designed eliminates much of the repetition and options on the current navigational menu. It also frees up the newsfeed by moving the status update function to the navigational page. The need for a bottom menu bar is also eliminated by adding the menu page.


IMG_8058.JPG

Interface Sketches: Challenge #2

Sketch 5 different task-ware sites that you think are well designed. Pick 3 screens for each site that show one task from start to finish, and sketch those with enough detail that they would be recognizable to another person. Pick your strongest sketch-set. Why does this design work (focus on design, not on function). Include an image of the sketch sequence, and a screen shot and URL of the original. 







Quick Draw really effectively transitions the user through the task steps. There is clear instruction and the concept matches the visual design so well. With the sketched icons and typeface style, it feels like you should add your scribbles to the screen.

IMG_0844.JPG

Interface Sketches: Challenge #1

Sketch 5 different brochure-ware sites (one-page designs) that you think are well designed. Sketch them with enough detail that they would be recognizable to another person. Pick your strongest sketch. Why does this design work (focus on design, not on function). Include an image of the sketch, and a screen shot and URL of the original. 



The Cafe Frida website works so well because of it's simplicity. It shows info about the cafe, its suppliers, its location, and menu. It does all this, while incorporating these beautiful flower illustrations into a parallax scrolling style.

IMG_0781.JPG



Interface Sketches: Challenge #5

Sketch 10 different interactive visualizations that you think are well designed. Sketch a meaningful, high-data page with enough detail that it would be recognizable to another person. Pick your favourite and explain the design works (focus on design, not on function). Include an image of each sketch, and a screen shot of the original. 









HISTOGRAPHY.io is an interactive visualization showing every historic event in Wikipedia as a dot. There are two views, each with their own colour scheme, but the sidebar remains consistent. There is a fair amount of whitespace throughout the design. A serif and sans serif font are paired on this display, and a sense of hierarchy is established by their different uses. When the mouse rolls over a dot, it enlarges showing an image and text box beneath with a description and the year. Overall, the design works because it allows all the elements to breathe and uses a simple colour and typography system.