Web design: Good websites and bad websites

Well designed websites

  1.  Kendra HasteScreen Shot 2018-01-04 at 09.53.11

Text colour: The colour of the text is kept to different shades of black and grey, keeping the text readable, while not drawing attention completely away from the images presented.

Text placement: The text is placed in a professional and easy-to-read manner for example, in the News and About pages. However, in the menu, underneath Contacts, the text is not in line with the presented hyperlink, making that side of the menu somewhat confusing to read.

Menus: Menus are presented in a way that makes the website clear and navigable and her products and sketches are shown in a clear way that makes the user want to investigate further.

2. Evoulve

Screen Shot 2018-01-04 at 10.28.20

Presentation: The website is presented as if it was created for a futuristic setting, keeping the design simplistic, while also giving the information you need to know what the website is about. It’s homepage contains simply the title in front of a depiction of the planet created with a blue pallet that users are able to revolve using the mouse.

The rest of the website follows the futuristic aesthetic, giving information about the different categories of technology that the website informs users about.

Text colour: The text is kept to a standard and clean font, making the text easier to read, and it is kept colourless to contrast with the navy blue background.

Text placement: Information on the website is, like the title, presented in front of the interactive earth, making the text clear and easy to read.

Menu: The menu is kept as a streamlined drop-down selection on the right side of the screen, and only appears if users click on the menu button on the left of the screen displayed on the cover page. This streamlines the UJ (User Journey) and makes the menu easy to navigate and read.

3. 4 Rivers Smokehouse

Screen Shot 2018-01-04 at 10.32.22.png

Presentation: The first display that users see is a series of GIFs showing people smoking different types of meat alongside the title over information options about the website displayed over images related to the page, such as 2 people enjoying a beer, or a chef cooking a meal. This makes each option seem interesting and gives users the urge to investigate the website further.

Colour: The website uses a very homely, cosy light brown and black colour scheme, giving it the feeling of a steak-house or restaurant. Black and white negative space is used to differentiate each website element and make it easier to navigate.

Text:

4. World of Swiss

Presentation: The content in this website is presented in a grid pattern below the page selection menu, with images keeping each link differentiated from each-other. Negative space is used well, keeping the pages from looking cluttered messy, allowing for easier navigation.

However, content below the fold is presented in a way that has the user scrolling through individual pages with information in front of a relevant image, giving variety to the main page and giving users an insight into what the rest of the website is like.

Colour: Primarily, the colours that are used are red and white, allowing for use of negative space and giving significance to aspects that the web designers primarily want users to pay attention.

Text: The text is kept to a professional, sans-serif font with regular red coloured text put in to give significance to certain aspects and for variety.

5.Hideout lodge

hideoutlodge

Presentation: The website’s content is displayed in an interactive fashion where, as you scroll down below the fold, the website reveals itself to the user as they’re scrolling down.

The menu is displayed by clicking on a tab allowing the main menu to appear at the top of the screen, which can be clicked to hide the menu again if the user wanted it that way. This prevents the page from being too cluttered and allows for greater audience interactivity.

Text: In order to keep with the theme of being solitary in a mountain lodge, the colours mostly used are dark-grey and white, with a light-brown used for displaying significant information.

Colour: Keeping with the theme of a mountain lodge, the colours mostly used are blacks and dark browns, with white every now and again for visual variety. This makes the website feel cosy and welcoming just like the lodge it is advertising.

Poorly designed websites

Rogerart.com

Presentation: The main page and the content on it is presented in a very unclear and messy fashion, with confusing colour choices and messy text placement, along with bright green negative space. This makes the website very difficult to read and to navigate as it is hard to know where users are able to click.

There is also little to no structure in the main menu as it is presented in a confusing numerical system making it illegible and complicated to navigate.

Text: The text is present in stark contrast to the plain green background with many unneeded colours in the text, along with the writing itself being confusing to read. This makes the website practically illegible and very hard to follow and use.

Petersbuss.se

Presentation: The way the website is presented is immediately questionable as the images are integrated very poorly and there is no synergy with the font and text.

Text: The colour for the text is very poorly used and is constantly changing and it also does not match with the negative space and the background used, both of which are also very inconsistent. This, much like Rogerart.com, makes the text barely readable and needlessly complicated to navigate.

Colour: The colour of the text and background do not compliment each-other, only adding to the inconsistency and making the text hard to read. The negative space is taken up with a paper texture, which makes the website confusing to look at and navigate.

 

 

 

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 )

Google+ photo

You are commenting using your Google+ 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 )

Connecting to %s