After finishing this week’s readings and tutorials, I feel like I glimpsed into the life of graphic and web designers and it was both exciting and terrifying. I am slowly gaining a more discerning eye with manipulations of design to draw in the user. By recognizing how audiences approaches on and off screen content we can create better and stronger utilized finished products. Last semester, we talked about using Google Analytics to track clicks on adverts and visits among other things. Marketers and web designers use heat mapping to gleam the best placement for adverts. When I googled eye tracking Kissmetrics blog on 7 Marketing Lessons from Eye Tracking Studies had interesting screenshots of heat mapped eye tracking that prove our readings. It’s just using the 5 steps to visual success outlined in White Space is Not Your Enemy.
1. Establish a clear focal point
2. Have a minimal number of groups for the eye to scan
3. Guide eye movement with visual sightlines
4. Set type well
5. Be simple – less is more
I feel like the cart came before the horse a little bit. It would have been nice to use these techniques during our first foray into web design. Using fixed or custom grids is now such an obvious first step or check to make before completing your layout to not overpower or create an imbalance in the layout. Likewise, manipulating flow of movement through the use of S curves or diagonal lines pointing to the start of the text seems like such a subtle way to guide the reader.
As soon as I uploaded my Dreamweaver portfolio site, I realized that while I worked out positioning in the various browsers, my site did not transfer well in mobile. The “Works that Work” in Type on Screen gave great examples to consider for changing the design to fit multiple platforms. Many of the screenshots of layouts and interfaces were fascinating, I was extremely excited at the prospect of creating something so well planned – using hide and reveal, gradients, and/or type as navigation. I just really wish the captions went more in depth in HTML and CSS – a little more guidance to see how that element breaks down in the coding would be so helpful. I can’t seem to get the various sections laid out for mobile. How should a mobile site handle block quotes? How did you guys reformat the navigation to fit for mobile?
I posted on Tamara’s Blog.