Week #5 – Organization, Layout, and Composition

This week we were asked to take a productivity style assessment. Here is mine:

You are an ARRANGER.

Arrangers prefer supportive, expressive, and emotional thinking. They encourage teamwork to maximize output, and they make decisions intuitively as events unfold. They block off time to complete work but excel at partnering with others to get it done. They communicate effectively, which helps them build and lead project teams. They tend to maintain visual lists, often using color.

Productivity tools that appeal to Arrangers include:

  • dictation apps like Dragon Naturally Speaking and Dragon Dictation or the web-based program Copytalk
  • collaboration tools like GoToMeeting, WebEx, SharePlus Office Mobile Client, and Join.me
  • aesthetically pleasing office supplies—for example, notebooks with unlined pages and pens in a variety of ink colors

What do you think? Sound like me? I think so. I did an EQ assessment and that did say my number one working style was collaborative and that I most enjoy working with others. I also really really like purple pens that and cool notebooks but also tend to trust my intuition. So, ya, I think its right.

This week we had an assignment to critique 4 sites/objects for effective design and layout–2 of each.  Here is an example of some of that.

HTML Cleaner (bottom half of home page)

html cleaner2

This site is another bad example of both design and layout.  The first screen shot is the top of the page and is worse than the bottom half of the page.  Perhaps they started making incremental improvements.  This site doesn’t take advantage of the Golden Ratio but does show some use of grids.  There is little point, line and plane composition to make the page more interesting. It too is very text heavy.  The second screenshot does have some boxes that use white and vary that from the gray page background (also in grids), but they it is not very asymmetrical or interesting. There is little scale variation or typography to make the site’s content or feature hierarchy stand out.  Leaving a lot of learning and reading required by the user. Not intuitive or a good user interface. 

apple

This site is perhaps the best example of design and layout of all these.  It uses many of the good elements to make the site simple, intuitive, and elegantly pleasing to both the eye and purpose of the user.  There is ample white space, giving the eye a break as well as making content stand out.  The use of color and motion do that as well. Pages that advertise their new products all have beautiful imagery and some media that really showcase the experience of that product.  And scale of the larger images, the sections of other content (visual hierarchy), and use of asymmetrical layout all make the most important areas stand out to be read first then the other sections.  The company uses hierarchy to make it look nice but also focus us on what they want us to see first — new iPad Pro, in this case.  This page has some good figure/ground going on.  They even use a lot of black and white on this particular page, which gives a good visually impactful “punch”.  Some of the other pages on the site have more grid use, especially more columns where there is more content to deliver. Apple is very good at designing for the user’s experience and this website is a good example of how they do that well. 

Still having fun. Next week is typography. I’m not sure I like all this artsy design stuff. It takes a lot of attention to detail that I just don’t care for. I would rather have an overall vision and let an artist do the design part.  However, now I know more principals and terminology to help better articulate the designs in my visions.  And I got a good feel for asymmetrical and how to use these principals for a better vision. So, I guess overall I am getting it and it is helping. Yay! Until next week.

– SARA

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s