Starbucks: Website Design

As I discussed in last weeks blog about Starbucks’ media relations, they have stayed current with today’s digital age by creating an interactive, well designed and easy to use website. There is more to a website than just making it interactive and easy to use. According to Robin Williams, writer of the book The Non-Designers InDesign Book, “Putting graphics and text on a page is the easy part (Williams 3).”

Balance

Pictures, cropped and grouped together to create a proportional look.

A well designed website will contain balance between all the objects on the page. This means that everything placed on the page is symmetrical and contains cohesion. How is this done? Well Williams provides a few ways in his book. One of the tools you can use is the re size and crop tool to make objects and graphics proportional. Another tool one could use is the grouping tool to group images together so that they give a cohesive and proportional look (Williams 150-154).

On Starbucks’ home page and throughout their website, we can see symmetry and cohesiveness everywhere. For e.g. on their home page towards the bottom right of the page, we can see six pictures which are grouped nicely and are all the same size making them look like a perfectly shaped rectangle. Another example can be seen on their Coffeehouse page.  Here you will notice that all their social media links are all grouped together and evenly spaced making them look like a rectangle.

Alignment

Alignment between text, pictures and headings.

Another aspect of a well designed website is alignment. Robins tells us “objects should be aligned along their edges or centers, so that the space between objects is evenly distributed (Williams 156-157).” Alignment is a big part of balance because it goes back to symmetry and proportions. Objects that are aligned also suggest that there is a relationship between the objects.

On Starbucks’ website you will notice that all pictures and text are aligned nicely and create balance. For e.g. on their Coffee page you will see wherever there is a heading for e.g. Coffee by Profile, it is followed by pictures that are aligned to the outer edges and which tell us that there is a clear relationship to between the two items. On other places on their website you will constantly see how all pictures, headings are aligned nicely. They are either left aligned, right aligned or aligned in the center. Another example can be seen on their pages tab on the top of the page. Each heading is aligned and evenly spaced.

Grouping

Images grouped together to create symmetry.

Grouping is another tool that can be used to create balance and alignment between objects and text on a page. As I mentioned earlier Starbucks does a good job of grouping pictures and text together to create balance and symmetry. This can be seen with their all their social media links on every page as well as pages with multiple pictures in an area.

Consistency

Consistency is an important part of website design. In my earlier blog post about Starbucks branding I discussed how Starbucks was consistent in keeping the general theme and idea of their logo consistent since they made their first logo and this has been beneficial for their brand identity. In the same way consistency is important in branding, it is also important when it comes to a company website.

Consistent format for all pages.

Starbucks’ website has a consistent flow when it comes to things like layout color and groupings. If you were to click on any of Starbucks’ page tabs you will notice that the layout is the same on each page. Logo in the top right hand corner, page tabs across the top of the page, search box in top right-hand corner and links to different sections of the website at the bottom of the page. Every page has the same consistent look and lets you know that you are on their page.

Contrast

Contrast is an important element of a well designed website. Contrast between colors can make certain things standout and visually pleasing to the eye.

Plain white background contrasts nicely with black text and green headings.

Starbucks uses a plain white background, which is key in making objects and text standout. For e.g. on their menus tab you can notice that each page name is in green, bold, large letters, which stands out nicely against the plain white background.  Other texts throughout the website is in plain black which also creates a nice contrast with the white background as well as the green subtitles and headings.

Cross Cultural Design

Cross-cultural communications is an important part of business these days. Different cultures can take in or perceive words and pictures differently.

Starbucks has a section on their webpage called web accessibility. The company states on this page that they are committed to diversity, inclusion and accessibility and they are constantly looking for ways to improve in these areas. One of the things Starbucks tries to do is use simple language and also avoid slang or jargon on their website. Another thing you will notice with their pictures and graphics is that they are simple and provide the intended message/emotion. For e.g. pictures or coffee, people enjoying coffee and or company products provide a simple clear message that cannot be misinterpreted, even across cultures.

Works Cited

Williams, Robin. The Non-Designer's InDesign Book. Berkeley: Peachpit Press, 2012.