Graphics are more than superficial; they define the strategic use of color, iconography, and typography. Essential to brand coherence, graphics often create the strongest initial emotional connection between the user and the experience.
Links to UX Architectural Guides:
More at neuronUX.com
Welcome back. I'm Soudy Khan, Director of User Experience at Neuron. Continuing in our series on creating a UX Architectural Guide, we are onto the seventh piece, or the seventh chapter of the UX Architectural Guide. That is Graphics. So at this point, you've already created your state screens and flows in the form of wire frames. Those are your lightweight, black and white, wire frames that show the interaction, that show the components on the page, and now it's time to apply graphics. Sometimes this is referred to "skinning the pages", but I think that really takes away from the importance and the need for strategic visual design. Graphics really are strategic. It's not just putting color on top of something.
You really have to consider the brand, the brand guide, what does color mean? What might a color mean to a particular geographic market? What is the color trying to say? How do colors create contrast? So that's really, really important. I would say the first thing you need to do is start with the Brand Guide. Look at the branding guide, look at the pages, look at the color pallet, build your color pallet out, start applying your graphics to the components. Don't use too many colors, use the minimum set, once again, required to effectively communicate and reinforce the brand of the product.
Also, remember that sometimes people use black and then you'll find that it's not the exact same black. Black could be made simply of black, or grey, or it could be made in a mixture of different colors. I've seen it happen too many times where people are using black and it's not the exact same black.
Another thing is typography. So, typography is part of this. You also want to, once again, you need to think about this really strategically. What typeface are you using? What embodiments, or fonts are you using in that particular typeface? Are you using multiple typefaces? I, too often, come across websites where there's a mix of fonts that sort of look the same, but they're not actually the corporate font.
So I'll see Verdana, and Helvetica kind of mixed together. Maybe sometimes even San Francisco, or another similar font, so you really need to go through and scrub your design. You need to create classes of typography. What's used for titles? What's used for headings and sub-headings? What's used for body content and bullets, and bullet style?
That's all part of the strategic use of graphics. So we have typography, we have color, and we have layout, of course. Hopefully all the layout work has been done in the wireframes.
But remember; a visual designer can also interpret the wireframes. For example, your top-level navigation doesn't always have to be at the top of the webpage. It could be located on the left-hand side.
So hopefully that'll help. Take a good look, once again, at the guides we have, the four guides online. They'll give you some kind of idea when someone takes something from the wireframe to complete the graphics.
Thanks a lot for watching. Take care.