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

Managing Productive Visual Design Reviews

by Christine Harris 14. February 2013 09:56

By Kim Cullen from Adaptive Path

Raise your hand if you’ve ever been a part of a design review that included any of the following comments:

 

[ ] I hate green.

 

[ ] Can you make it “pop?”

 

[ ] Just tweak it around a bit and we’ll have another review.

 

[ ] Make the logo bigger.

 

[ ] Can you just make it look like Apple?

 

It’s a common challenge in visual design: creating a feedback structure that respects the subjective nature of visual design, yet also generates actionable items for moving forward. In reviews, clients need to know that their opinions are heard and the design team needs to walk away confident that they have clear next steps. This can be especially challenging when reviewing visual design comps, often considered more subjective then the no-nonsense wireframe.

View the full article: http://www.adaptivepath.com/ideas/beyond-i-hate-green-managing-productive-visual-design-reviews

Tags: ,

Graphic Design

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

Konverge Fun At Work: How to make perfect movie popcorn

by Christine Harris 14. September 2012 15:53

Konverge developer Chanvir & Developer Manager Michael show us how to use our popcorn machine.

Watch it on youtube

Tags:

Konverge Staff

Microsoft is Imagining a NUI future

by Christine Harris 14. September 2012 15:14

You don’t have to look very far to realize that technology is becoming more natural and intuitive. In a typical day, many people use touch or speech to interact with technology—on their phones, at the ATM, at the grocery store and in their cars. The learning curve for working with computers is becoming less and less of a barrier thanks to more natural ways to interact.

Read more on the microsoft blog: http://blogs.technet.com/b/microsoft_blog/archive/2011/01/26/microsoft-is-imagining-a-nui-future-natural-user-interface.aspx

Natural User Interface Technology

Tags: , , ,

Interface Design | Microsoft

Graphic Design for Sharepoint Customization

by Christine Harris 14. June 2012 10:26

 

Graphic Design for SharePoint – An Overview

SharePoint 2010 is an extremely flexible data asset management system used by companies for things such as internet sites, enterprise content and document management, extranet and internet sites.  Konverge, a custom software development company and certified Microsoft Partner, specializes in SharePoint customization.  While SharePoint is a popular platform for its functionality, clients come to us with one major complaint: out-of-the-box SharePoint is ugly.  Beautiful design is in demand everywhere and to make the SharePoint user interface look good, you need not only an excellent SharePoint developer, but a designer who is comfortable with design theory, web technologies, and can deal with topics that are traditionally handled by developers.

If you’re coming from a web design background, think of SharePoint as a giant CMS – in order to customize it you’re going to have to override and adjust your design to fit within someone else’s code.  Like other CMS’s, SharePoint includes themes, master pages, content pages, cascading style sheets, and web parts.  Custom design work for a SharePoint site is commonly referred to as “Branding”.

There are a few different approaches for implementing a design or branding a SharePoint site.  Which level of customization you choose will be determined by client requirements. 

Basic - There is a certain level of SharePoint customization that can be achieved by an end user with some SharePoint training.  At this level, users can select master pages and create custom themes for corporate colors and even add a logo.   Themes in SharePoint 2010 can be made with Microsoft Office using Word or Power Point; furthermore, they can be created within SharePoint by modifying an existing theme.  However, the look and feel of the site will still be out-of-the-box SharePoint and modifying a theme does not affect page layout. 

Intermediate - A medium effort project may only require use of SharePoint designer and may involve making basic changes to CSS, HTML, and creating a copy of the out-of-the-box master pages. 

Advanced - The most advanced level of customization includes creating custom master pages, page layouts, cascading style sheets, and web parts.  For this sort of development you would be using a combination of Visual Studio and SharePoint designer.

 

Becoming a Graphic Designer for SharePoint

SharePoint is used by 78% or Fortune 500 companies and Microsoft has sold over 36.5 million user licenses between 2006 and 2011.  It’s here and it’s clear that it’s not likely going anywhere soon. 

  1. Become a SharePoint user.  Get to know the various features and nuances of SharePoint.  SharePoint has design limitations, like all CMS systems, and a good design for SharePoint must work with a wide range of SharePoint functionality – otherwise functionality will be compromised.

  2. Have the necessary technological competencies – Graphic designers for web technologies not only have a background in design, but also a technological background in at least the basics (HTML & CSS).  In addition, designers will want to be comfortable with XSLT as SharePoint 2010 makes use of it for Web Parts.  You should have a passion for UX.  While you may not have to be a .NET developer, knowing your way around ASP.NET environments is required for Intermediate to advanced customization.  You will need to be able to use Visual Studio 2010 & SharePoint Designer 2010 in addition to design software such as the Adobe creative suite or Microsoft Expression Studio.

  3. Be a CSS guru.  Almost every aspect of SharePoint is styled by CSS.  For the basic level branding mentioned above, CSS knowledge is not necessary; however, this is not the level of project that is likely to be brought to an agency.  The main CSS file for SharePoint 2010 is around 8,000 lines of code – and there are additional CSS files to the main one which brings the count close to 10,000.  CSS is pervasive in SharePoint 2010, which is great for customization.  However, there are some hard coded inline styles to be found which can throw a wrench in design plans if you’re not aware of them in advance. 

Tags: ,

SharePoint

Logo Design Process –Field Eagle

by Christine Harris 17. January 2012 11:48

 

Field Eagle is a field inspection application that enables facility managers and building owners to perform property inspections.  Konverge partnered with Motion Computing using their rugged F5v tablet as an ideal machine to make Field Eagle a durable product in the field.

Dino Bozzo, the creative visionary for Field Eagle wanted to create the Field Eagle brand around ideas of ruggedness, durability, endless mobility, and freedom (to do inspections easily anytime anywhere).  The eagle, having a razor sharp eye for detail, being boundless and rugged, and known for their endurance, speed, and strength was an ideal symbol for the new Konverge product.

After hearing Dino’s ideas behind the brand, because eagles are such a visually strong symbol, my initial response was to go with the eagle as a symbol for the logo.

I like to sketch out logo ideas on paper before firing up Illustrator.  What evolved from this was circular eagle shape with a swooping wing.

Taking the concept into Illustrator, I started using geometric shapes to make the wings and head of the eagle.

 

 

And what it might look like as an icon…

 

 

The stylization of the eagle wasn’t right. The product team was not 100% happy with it and neither was I….so back to the drawing board….

 

 

And back to Illustrator keeping the circles more contained within the central circle this time.

 

 

And add some feathers and we have...

 

 

Just needed an eye….we went with the last one.

 

And Finally, the logo.

 

 

 

Choosing the Palate –

 

 

Brown – Brown encompasses earthiness & nature with reliability and support

 

Blue –  Blue has been a standard color in business branding for its association with loyalty, intelligence, communication, and trust.

 

Navy – Navy shares qualities with both blue and black.  From black, navy gains the attributes of seriousness, earthiness, sophistication and excellence.

 

Tags:

Graphic 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