Toll Free: 1 866 640 2345

Email: info@konverge.com

Just another custom software development blog.
Writing on technology, design, business, SharePoint, Microsoft, and all things software.

Konverge Blog

Empty States Design

by Christine Harris 6. February 2013 17:00

It’s one thing to get someone to sign up or download your app, but to get them to use and engage with it is another.  Users need to easily find direction and sense of purpose which is why onboarding is so important.  Don’t forget about the empty spaces too.  These screens are great ways to delight users with design and let them know what’s happening.  

Empty States is a tumblr blog that collects screenshots of Empty States and gives critiques:

http://emptystates.tumblr.com/

A great source for inspiration for empty states.

 

 

Tags: , , ,

End User | Graphic Design | Interface Design

Retina Display and The Future of UI Interfaces

by Christine Harris 5. February 2013 16:31

What is old is new again when it comes to UI.  The shift away from Skeuomorphic design to a Flat design and design for Retina display brings print design to the screen.

Skeuomorphic design made popular by Apple has been both admired and hated by designers.  While the skill taken to painstakingly create illustrations that are derivative representations of real things is not easy, critiques of skeumorphism see is as lazy design, meaning it cannot evolve, lacks innovation, and is actually contributing to a devolution of design.  After all, where can one evolve from derivative representation?  Make it look more like the real item it represents? 

 

 

Enter Flat design, the backlash to skeumorphism.   Google, Facebook, and Windows 8 are good examples of this style.  Flat design has been championed as the revolution screen design has been waiting for: it’s innovative, honest, and feels like a cool crisp drink on a hot summer’s day.  Perhaps it was Apples rich Corinthian leather texture used in their Calendar that made designers say “This has gone too far”.

 

 

Skeumorphism held a special role in UI design way back when we were making computers for every household and every kind of user.  The job of designers at this time was to make technology friendlier and a great way to do this was to make something new seem familiar and even better, add elements of nostalgia (for example, Apples vintage microphone voice recording app, or using a rotary phone dialer interface). However, this generation is now tech savvy and we have the following generations that have come along.  The continued use of real life metaphors starts to become a little insulting at this point.  

The shift away from skeuomorphism also has to do with the introduction of Retina display.  We realize that skeumorphism looked so great when it came out because is created a beautiful interface on top of the crude 163 pixel per inch resolution.  On a Retina display like in print, skeuomorphic techniques fail and look ridiculous.  For this we need to look to another design strategy – print design.   As John Gruber has mentioned:

 “The trend away from skeuomorphic special effects in UI design is the beginning of the retina-resolution design era. Our designs no longer need to accommodate for crude pixels. Glossy/glassy surfaces, heavy-handed transparency, glaring drop shadows, embossed text, textured material surfaces — these hallmarks of modern UI graphic design style are (almost) never used in good print graphic design. They’re unnecessary in print, and, the higher the quality of the output and more heavy-handed the effect, the sillier such techniques look. They’re the aesthetic equivalent of screen-optimized typefaces like Lucida Grande and Verdana. They work on sub-retina displays because sub-retina displays are so crude. On retina displays, as with high quality print output, these techniques are revealed for what they truly are: an assortment of parlor tricks that fool our eyes into thinking we see something that looks good on a display that is technically incapable of rendering graphic design that truly looks good.

 

If you want to see the future of software UI design, look to the history of print design”

 

Moving forward, do what is real and looks good.  

 

Some examples of Flat Design:

 

Squarespace - http://www.squarespace.com

 

Nest - http://www.nest.com/

 

Layervault - https://layervault.com/

 

Lost World’s Fairs (Print Poster Style) - http://lostworldsfairs.com/moon/

 

Justin Timberlake (Magazine Style) http://justintimberlake.com/main/

 

 

The New Yorker (print newspaper style) http://www.newyorker.com/

 

Sources:

The Trend Against Skeuomorphic Textures and Effects in User Interface Design, by John Gruber

http://daringfireball.net/2013/01/the_trend_against_skeuomorphism

Tags: , , , ,

End User | Graphic Design | Interface Design

Graphic Design Fundamentals for Developers

by Christine Harris 1. November 2011 16:31

In the world of web development, there is a great perceived divide between the roles of developers and designers. It goes with the common idea that creative people use more of the right side of their brain which is associated with random-intuitive, subjective thinking, and a better ability to look at the big picture. While on the other hand technical individuals are dominated by the left brain which is associated with logical-sequential, rational and objective thinking, and looking at smaller parts of the big picture.

However, developers and designers have a lot of commonality regarding their thought processes when it comes to their work. When a project is proposed to a designer or developer both must break down the project into its smaller parts and build upward in a logical-sequential way. Both must use creative problem solving skills that consider both the big picture and its smaller parts.

What is undoubtedly different are the tools used to accomplish the task. This article is meant to bridge the gap by explaining some design fundamentals for developers.

Layout Principles – The Grid

Grids are made up of horizontal and vertical lines that act as a backbone to page layout. Using grids in layouts has been a fundamental design principle for centuries. Not all design uses a grid; however, for designers to achieve layouts that have structure and consistency, grids are very helpful. Grid layout in web design and web applications are an important part of usability because they create predictability, ease of navigation and make layouts visually appealing.

For web, one commonly used grid is the 960 grid. This width is optimal for 1024 X 768 screen resolution sizes. For most layouts 2, 3 or 4 units are desired; therefore 12 and 16unit grids are ideal because they are easily broken down into these smaller units in a uniform way.

The following images were borrowed from 960 Grids

960 Grid with 12 Columns

960 Grid with 16 Columns

The following are examples of sites that use a grid based layout:

 

Typography

Typography is another important design fundamental and is an important aspect when creating good UX. Typography is not just about choosing a font; rather, it considers things such as typeface, font-size, font-weight, spacing, margins, line height and color. Typography patterns have been established for centuries and because users look for familiar patterns to quickly scan pages good UX integrates these age old patterns. Consider typography commonly found in newspapers: Largest font for the headline often bold, medium size font for sub-headline, smaller fonts for the article copy. It would only make sense that an online news site would follow the same pattern:

It is possible to drive an entire UI with typography alone. Consider the following examples from Google and UX Magazine that have little to no use of images:

 

Serif versus serif

A short and worthy note for design fundamental for developers is the difference between Serif fonts and Sans-serif fonts. Serif fonts have added detail on the ends of some of the strokes that make up the letters and symbols. Sans-serif fonts are simply fonts that are lacking serifs.

The following image was borrowed from Wikipedia

 

Time New Roman and Georgia are examples of serif fonts while Arial and Segoe UI are Sans-Serif fonts.

 

Color

Color is an interesting aspect of design because it can be applied to any element and can create or change meaning for that element.

Color Terminology

Painter Primary Colors – Red, Blue, Yellow

Print Primary Colors CMYK – refers to the four inks used in color printing: Cyan, magenta, yellow, black (key)

Light Primaries RGB - refers to an additive color model where Red, Green, Blue light is added together to produce a broad array of color. Computer screens, televisions, and other electronic systems use this.

Hue – means the actual color name from the pure spectrum of colors such as red, orange, yellow, blue, green, and violet.

Saturation – refers to the dominance of hue in the color. A color becomes desaturated when white is added to it.

Value – is defined as the relative lightness or darkness of a color. Value is significant when it comes to defining form and spatial illusions. For example, a contrast of value separates objects in space while a gradation of value creates contour.

Psychological Implication of Color

Color may imply meaning or emotion but this notion should not alone dictate color choice in a chosen palate. How people are affected by different color stimuli vary from person to person and can be culturally dependent. The job of the designer is to create meaning in colors by how they use them in design.

Tags: , ,

Graphic Design