Assignment 1: Part 2.2

Colors – Logo – Typography

Colors

When we consider our design vision, the context, user profile and the logo of the EthicStar webshop, we came up with a colour palette to be used in the aesthetic design of the page.

In the aesthetic design process, we wanted keep using the original colors used in the logo as a strong and powerful element, because it it gives recognition to the present users . On the other hand, in the old design, the color black is used as the second dominant color in the webshop. Only, using them together gives too much contrast and therefore sometimes can be tiring for the eyes. It would be better to use colors that can be used with the strong and energetic red, to make the whole look of the website more calm and balanced. To get this balance, the color grey is used. This cool color interacts nicely with the warm red. Next to this, grey is often seen as a classy business color. For the background calm, light pastels are used: a soft ivory and a very light grey were selected. For extra options, we decided on using a second medium contrast color, namely a pastel blue or green.  

colours

Color Palette

By comparing the different palettes, we found that the more vibrant red fitted the original logo more closely. After switching around the grey’s and whites, we came to the conclusion that the extra vibrant color (blue and green) was not necessary, because it would compete too much with the red. In the end, we chose the following palette. colorss

Final color palette for the webshop

Logo Redesign

The old logo of EthicStar was too gritty to fit nicely into the clear and balanced redesign. Therefore, the logo was redesigned as well, to make it less hard to read, chaotic and unclean. The recognizable star was kept but sometimes altered, and the font of the letters was changed around. We found that the font ‘Typo Grotesk’ worked well with the style of the star.logoprocess

Early stages of the redesign

  The last logo was the easiest to read: the logo and text kept the balance. The filled in logo reminds us of the original logo, which is nice because the existing customers will still recognize the brand this way.

logochange

Old logo                                                                                       New design

Typography and text

From previous experiments it became obvious that there was too much text on the website. Also, the text was not always aligned nicely or not big enough to read properly. Although Ethicstar made an attempt to show what headers and what normal text was by using another color for this (using bold further down the text) makes this choice less potent. Through our observations and discussions, we agreed the website should look more stylized and clean so that the user feels it is less chaotic than before.  

Logo

As shown earlier, the stylizing  is already applied to the logo, the font is now Typo Grotesk. This font is less gritty than the original, making the logo more neat. The capital E and S are kept as capitals (same as in the original) to keep the name readable. grotesk

Typo Grotesk Font

Buttons

To keep the site consistent, the buttons to the different categories will also use the Typo Grotesk font. Evidence suggests that a website, much like books and other media, should use only two fonts to keep everything together (Hulett, 2015). As with the logo, this will not be in full capitals. If this would be so, it would overpower the logo too much. To show a clear hierarchy, the logo will be bigger than these category buttons. The categories on the left will be even smaller, but will still have the same font. Using the different sizes will show the hierarchy between the buttons, while keeping the same font will show that they are connected. (Hulett, 2015)  To show where the user has navigated to, the selected categories will turn red. As there is a big contrast between red and grey, this make it easy for the user to see the difference.

Headers & text

To keep the same visual style, headers will use Typo Grotesk. For readability, some different serif and sans-serif fonts were compared. In the next visual, all headers are in Typo Grotesk, while the text-fonts have been changed. The headers have the name of the used text-font.

typo

By comparing and discussing the different fonts, we agreed that the serif fonts were more readable than the sans-serif fonts. There is also an excellent blogpost to be found here: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/ , which discusses both sides. The overall conclusion is that it is still not clear on which is better, several papers are cited here as well. Comparing the good and bad sides of each type though, we found that for our page, the serif font works best. This left us with three options, Georgia, PT Serif and Constantia. Comparing these, we found PT Serif to be the less condensed one, while also having a bit more height, and since there is no real size-constraint, we chose this one as it has a little bit more ‘breathing space’. A paper from Boyarski, Neuwirth, Forlizzi & Harnkness Regli (1998) also suggests that a font with a bit more height is more readable on the web.

We think that this combination of header and text font is nice and easy on the eyes. To make it even more easy to the user, text should always be kept concise. From the observations of the original website, all participants mentioned that there was way too much text. Another thing that would make text more readable is to make the text area not too wide, so the eyes of the user do not have to go over the whole page. This was already suggested in the eye-tracking test results as well.

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