Week 3a - Principles of good social media design

Good design for social media is not much different than good design for any other medium, sharing many of the same principles that go beyond the aesthetic to make something more functional and understandable.

When I read the current assignment to assess the design qualities of 4 websites from the list, I was concerned it would be hard to figure out which ones needed improvement. But that turned out to be the easy part. It's what makes a website great that's hard to define. Good design doesn't stand in the way of presenting the material. It often goes unnoticed.

I'm going to start with spotmetering.com. I'm not familiar with what spot metering is, but this website seems to offer valuable information to those in the photography industry. Unfortunately the dark design, poor structure, and lack of branding makes the author seem not in the least bit credible. Clearly he's very technical, but he is also an artist for goodness sake! While the book he is selling is not a high purchase item, his site is poor enough that I would be concerned his book is just a bad and would have reservations about a purchase. Some quick improvements:

1. Remove the top animation and background image. They attract attention, yet offer no information to the visitor or reinforce the brand. The page is easier to read without these items. Instead put the links near the top of the page to help the viewer find information.
2. Layout the page in a column format and left justify the text, placing the page navigation in a side column so that the viewer doesn't have to scroll to read the main content. Padding around the text will help it look less crowded. The page will be more organized making the content easier to quickly scan and read.
3.  Rather than emphasize text by using all CAPS AND DIFFERENT COLORS AND UNDERLINE, choose one, or better yet none at all and emphasize by using white space to group important content.
4. Use a heading hierarchy rather than different colored boxes to help the reader understand how the content is organized. It's difficult to know what and where to read, almost like you have to force yourself to find the content. It's not that boxes are bad, but there needs to be some rhyme or reason to the type of boxes.
5. The page has many beautiful photos, perfect for creating a stunning website. Put them near the top of the page to encourage the viewer to read further to learn how to create a beautiful image. The author can display his knowledge and authority on the subject matter.
6. Black or dark text on a light background is preferred by viewers. If the owner wants a dark background to create a sense of elegance, then the page needs more white space and a larger font size than the average website. 

Next is www.roverp6cars.com, an auto parts retail website packed with quality content and information for the visitor. Structure, organization, and aesthetics are important if the viewer is able to quickly navigate to the specific auto part they need. This appears to be a Mom and Pop shop, and dealers for classic cars are considered nerdy. Certainly not know for their design expertise. I would expect the website to be a little clunky so I am okay with some ugly. But, if the site makes it too hard for to find what I'm looking for, I'll exit the site in frustration without making a purchase rather than put in the effort.

1. First thing to address is readability. With the mid-grey background and images behind all of the links, it is impossible to get enough contrast to read without straining. Taking away the images behind the links would increase readability.
2. The text is in multiple sizes, colors, and underline, making it hard to understand the hierarchy of the text.  Format the text to help the reader understand what is going on. On some of the secondary pages, the pages are formatted, but the text is small with low contrast and the paragraphs are too wide. The use of margins and padding around the paragraphs will make them narrower so that the reader is less likely to jump lines. Larger text in a sans serif with a lighter background will make the text easier to read. Finally, center alignment makes it hard to tell when a topic starts and ends and therefore can only accommodate very little text. Left alignment makes it easier to understand content if there is a lot to read.
3. This site has a split personality. It's almost as though you've accidentally jumped to a different website on some of the pages. Using the same style throughout the site helps the viewer understand the content and reinforces the brand. In addition, I see a logo in my Chrome tab, but no where else on the site. Using the logo in the upper left corner will reinforce the brand.
    

The Toyota website offers many different products, services, and information, but you don't get sensory overload when you open their page. It is polished, current, easy to navigate, giving me a sense that their products offer the same qualities. Everything reinforces the brand. It builds confidence that, as a company, they are organized, competent, well funded, and professional - important considerations for what is one of the biggest purchases I'll ever make.

1. Despite all of the information this site offers, the main page is has minimal links (before scrolling) allowing the viewer to focus first on what they are selling - cars! The changing image of the car presents several of their products in a small footprint.
2. Drop down links make it easy to navigate and find information on the site. And the "back to the top" link makes it easy to navigate to get back to those top links after scrolling.
3. Plenty of white space makes the page easy to scan and read. I'm happy to peruse their product information. The main information they want the viewer to find is available without scrolling, and the rest of the information is laid out in a grid format below.
4. They use one color for headlines and the same font throughout reinforcing the brand.
5. Social media links are on the main page to help the viewer share and find information. 

The Apple website has fantastic design as well, as it should seeing how that is the main justification for the premium price point of it's products.  The sleek, well crafted site mirrors the products they sell -  products that are of high importance to it's customers. When was the last time you were away from your phone for an extended period of time? I am not a user of Apple products, but I was a little surprised that their site was kind of solemn rather than little more playful, like the old iPod ads. The current design makes me think they are trying to appeal to a broader customer base.

1. They are masters at distilling down the information and getting you to read what they want you to read. The pages have a large image with only a few lines of text. This is a case where center alignment works.
2. The double row links at the top of the page with simple icons lets the user know what is available on other pages without distracting from what is on the current page.
3. The colors, the font, the white space all reinforce the glossy brand.
4. The Apple logo is at the top right corner of every page, reinforcing the history of the brand.
5. They alter between light and dark backgrounds on different sections of the site, creating impact. Plenty of white space makes the content easy to read.
6. Apple offers a wide range of products and services, but the same design and formatting is the glue that holds it together. 

So much more that could be said about each of these sites. Thanks Claudia for throwing softballs.