I will be looking into six website designs. Three good and three bad.

Good website design:

The first website I will be looking at is http://www.kendrahaste.co.uk/

Screen Shot 2018-01-03 at 15.19.23

When looking at the website we see the first screen. The screens show a big picture of one of her sculptures she made. There is a white bar at the top of the page. It gives the name of the website “Kendra Haste” with subtext under it. There’s a grey text button to go to other pages on the website. On the right side, we also see social media links which links you to the creators Facebook page, LinkedIn, Wikipedia page, Instagram and email. The text colours for the title is a purple while other text/icons are grey. A function to indicate the smaller text are buttons when you hover over them they change colours. The spacing is shown in the text line to define other pages.

Screen Shot 2018-01-03 at 15.20.24

An additional of the website to load shows a pop up to subscribe to a newsletter to get the latest updates. It only fills some of the centre showing a picture and text boxes to fill in your information.

Screen Shot 2018-01-03 at 15.20.37

On a page called “Sculptures”, we see a collection of pictures of various sculptures the person has created. The website pictures are under aligned with the text leaving loads of negative space on the right and left the side of the screen. The pictures are placed in columns of four with rows going down which you can scroll on the website. Each of the pictures has equal gaps between each of the images to make a smart arranged style to the website.

Screen Shot 2018-01-03 at 15.20.48

Screen Shot 2018-01-03 at 15.21.06

Other websites have a similar left and right big side space.  This time on the “Exhibitions” page has a different layout. This time it shows one post as a column which each of the posts go under a post.  Same for the “Store” page but this time it uses two columns.

Overall I do like this website it is smart from the whites and small use of colours. I do like it use of negative space from the layout of the website. It feels a bit generic but the website use is reasonable.

 

The next website I will look at is called http://rightwaysigns.com/

Screen Shot 2018-01-03 at 15.43.19.png

This website seems like a service for signs building for business. They create metal text sings which are usually found on the front of shops. They also make painted wall signs which can be used for commercial use as well. Their web design is very styled. We are first viewed with a bard at the top with the name of the website with other information. There is a playable video of their showreel of work they have already done.

The top of the websites shows the title which has some wavy text with an outline shadow. Next, to it, we see a character which could be the mascot for the company. On the top of the title, we see a thin line with some small information on each end of the line above it. The colours are bold and appealing to the viewer and can attract arty people, etc.

Screen Shot 2018-01-03 at 15.43.31Screen Shot 2018-01-03 at 15.43.42

The bar below the title shows various options you can choses to navigate around the website. Each of the options are buttons which you can click to go to another page. The website uses lines to define the different buttons which sends you to other pages. Each sub titles have a animation when you hover over text.

Screen Shot 2018-01-04 at 09.48.25.png

When pressed one of the buttons tab will come up which is still linked to the button you original chose. From here you can select something specific you want from the website. The tab shows up in a bold dark blue which contrasts well with the pastel white text.

Screen Shot 2018-01-03 at 15.46.37

The title and navigational bar are universal to the whole website where you can always find it at the top of the page if you go onto another page on the website.

When scrolling down we see we get information about the service. We see that the main background is still a pastel white with the dark blue text being bold on top of the background. We see all images and text are all aligned up the middle which is leaving a big areas of negative space on the left and right side similar to the Kendrahaste website.

Screen Shot 2018-01-03 at 15.45.46

Although most of the website uses negative space on the left and right sides we can see they break there rule with some parts of the website.

Screen Shot 2018-01-04 at 10.01.44

Screen Shot 2018-01-04 at 10.00.14

We see that a picture and video stretches to fit all of the workspace so it is touching the edges on the main page. This is a good way to make a website looking unique. There is a pause to the informative text and also breaks down various different topic of information which makes the website more readable.

The bottom of the website we see a dark blue bar with the mascot outline using a darker blue to merge them together but is still visible to the eye. On top of the blue bottom bar we see white text which gives us other smaller options like ‘about us’, ‘contact us’, etc. There is also the copyright, address and credit. We also see icons for social media like Facebook, Instagram and Vimeo. On top of that we see a newsletter subscribe feature where the user can enter there email to get updates from them. Above we see a illustration which separates the contents of this and below from the unique text.  This is universal to every page on the website.

Screen Shot 2018-01-04 at 10.00.33

Viewing their portfolio of work it is quite smiler to the kendrahaste website. We see a preview photo of there work displayed in squared and rectangles photo sizings. Each photo has the title in the centre of each picture in a white with a title and a subheading below it which fits well with all of the photos with the slightly darker filter.

Screen Shot 2018-01-04 at 10.21.05.png

When hovering over the photo you will see the photo zoomed in but keeping its original size. A small white thing outline borders appears to. Each of the photos you can hover to play the small animation.

Screen Shot 2018-01-04 at 10.26.16Screen Shot 2018-01-04 at 10.26.11

Once clicked on to the photo a pop up shows you can see the various photos of that one specific project where you can click to view but the small five white circles which are on top at bottom centre of the photo space. On the right we see a square blue box with white writing inside which gives you the project title and information in smaller text. Clicking anyway outside of the photo and blue box closes the pop up leading back to the photo page. “X Close” also works too. You can even navigate other project but clicking on the arrow icons on the left right side from outside of the picture.

Screen Shot 2018-01-04 at 10.26.20

The collection of photo shows they are arranged in a pattern. One row has two columns which shows two rectangle sized shapes while the next two rows have three columns which shows three squared sized photos.

Screen Shot 2018-01-04 at 10.23.28.png

Overall I do like this style of website. The website looks smart and has a nice appeal of creativity from colours and composition.

 

Another good website design I will be look at is: http://clubofthewaves.com/

Screen Shot 2018-01-04 at 11.06.07

Club Of The Waves (COTW) is a website showcasing art and photography from the various artist which is art sea/surfing related. The website also gives information about the artist and gives them credit for what art they made.

When loaded the website we can see there is white curved pattern which is used for all of the background of the website. The composition shows it is simple. The title of the website “COTW” is found at top left which is linked with the alignment composition for the website. The website leaves a lot negative space on the left and right side of the page which is linked to every other good web design written about. The title text is rotated 90 degrees and the text has used tracking to make each of the letters spaces out separately.

Screen Shot 2018-01-04 at 11.23.55

 

Meanwhile other bolder text are show at the top and left side of the page. All use a san serif bold font. The typography for specific words like “art” and “photography” are show in different colours compared to the other text which is black. This is good to highlight specific words like key words for big bold text like this.

On the main page under the bold text at the top centre. Under it there is a button called “View all creatives”

Pop up artist

Every time when you reload/load the main page of the website it loads up with other artwork by another artist. Most things stay the same only some pictures and text change.

When clicking on a specific artist by pressing on the “View Artist” button it will send you to another page. A flat colour will show up and will swipe from left to right showing a white and text and images popping up by a basic up animation. We see the main header bigger than the title of website at the top middle.

The header is the artist name with a sub heading below it says what section you are on the website. It says you are on the “Artist” page for “Heather Brow” which the artist lives in “North Shore Kaui’i, Hawaii”. We see the global title on the left side for this website. Below we see some more information about the artist. We can see the artists website and social media accounts by the icons.  We also see text below the main image under the subhead and main heading showcasing one piece of their art.

Screen Shot 2018-01-11 at 12.54.13.png

artist social

When scrolling down we see more pictures of the artist artwork or aligned in the centre leaving negative space on both the left and right side. The pictures are displayed are two columns while having a brick style pattern for the rows with each of the images in rows over lapping the other images on the other row. You can not click on any of the pictures.

images

In addition when scrolling up towards the top of the page a small bar will appear at the bottom of your screen. It will disappear if you scroll down. The bars gives us information about if you want to share this website on your facebook or twitter. Then also ask if you want to look at more artist on the right side.

website bar

At the bottom we see other information. We see a summary on the artist we just looked at then a coloured bar if you want to sign up to there newsletter for the website. The bar fills all of the left and right edges. Below it there is more text about the website on the right side and shows there social media accounts on the left side keeping the big right and left negative space again.

webiste bottom

I do like this website from the contrast in colours and its text used through out the website. Comparing to the other two this website feels and looks very similar to the Kendrahaste’s website from being portfolios which show images, etc. They use whites with some colours but the white colour dominates the website design.

Overall comparing to the three websites shows that the Kendrahste and Club of the waves website direction are for similar use. The website displays images of there artwork which can viewed by anyone. Kendrahste website is more of a portfolio so people can look at the person artworks. This website can be used to show people who you are interviewing you, etc.

Club Of The Waves website is more of a showcase of many artist of surfboards/waves themed art. To gives information about the artists which if you like you can follow them on there social medias, etc. Right way signs website is the most different. It is website to advertise there work. The website shows past work they have made which is commercial signs creations. The website is a portfolio of work they have done but is also a advert to get people to hire them.

Right way signs website is my favourite website design. It is bold in colours and is very a interactive website to go on to with many animations by hovering over certain features. It is a unique an remediable website to look at from its choice of images, layout and colours. Its colours are bold and contrasts well with the colour pallet to make the text bold and memorable.

Bad website design:

I will be now looking at bad website designs to compare and show what not to do when making a website.

The first website I will be looking at is: http://www.arngren.net/

bad website 1

The major part of this website is it’s layout. Every text and images are very close together leaving no negative space at all. The colour pallet is a mess and is using too many colours for one page and the different colours for the text. Some text are too smaller and hard to read. Each of the pictures are not layout thoughtfully and are just placed to fill in the space.

Clicking on one of the products leads you to another page. The main page is better but still has many flaws. There is negative space but needs more to make a better design. Text and images are still cramped up leaving no negative space on the left side.  The text is more readable from just the one colour black for the text but needs to be a bit bigger to be more readable.

bad website 1 2.PNG

Also note you have to scroll left to right which is unconventional. Scrolling up and down is good as a computer mouse has a scroll key.

 

The next website I will be looking at is gatesnfences: http://www.gatesnfences.com/

bad website 2.PNG

Not as bad as arngren website but still has flaws. It leaves negative space on the left and right side of the page while most of the content in the middle. The text is all in black with some blue highlighting keywords, etc. The big flaw is that there is too much text/information to take in on one page. The text seems a bit too small to read as well.

The top banner it is ok but would be better if the image was touching the left and right edges similar to other good websites we looked at. The black colour at the stop doesn’t fit well with the banner image as some of it bleeds into the background. Most texture backgrounds such as the banner, background and buttons feel outdated for 2018. Good websites have flat clean colours to present there website well and overall looks better.

Layout on the main page is decent but possibly the left side could be improved there are too many bar alignment next to each other. This could improve if you moved one of the bars on the other side or remove it completely. For the buttons there are too many of them to navigate through. Buttons should be shortcuts not long lists for specifics subjects.

Looking at another page on the website we see it has a similar layout but improved slightly. We only have one bar down which is the buttons while we have a better layout for pictures which are in columns of four. Each picture has text but the text colours keeps changing from black to white which doesn’t look smart.

When clicking on one of the images you expect it will pop up on the same page. It doesn’t When clicking on a image it opens a new tab and directs you to another page on the same website. This is disadvantaging and takes more time to view information about the picture.

bad website 2 2

The last website I will be looking at is Suzanne Collins books: http://www.suzannecollinsbooks.com/

Most likely the better design from the bad designs I looked at. First when we see the website loaded we see a banner at the top “Suzanne Collins” in centre. The title is in a small coloured banner. The background is white with most text being in black and blues. The text is in serif font which dose fit the website as Suzanne Collins is a writer.

bad website 3

The layout is a mess. We get some text on the left and right of the page with no text in the centre only two non aligned pictures which are displayed.  The text feels a bit too small and should be increased to make it readable. There is a lot of negative space. This applies for most of the pages on the website.

bad website 3 2.PNG

Overall it is nice site to get information by Suzanne Collins but has a bad web design and needs to be improved.

 

I have made a list of the do’s and don’ts in web design:

Do’s: 

-Simplicity over complexity

-Leave negative space

-Use a base colour as a light colour such as white (for the background)

-Use colours which fit with the website and colour pallet. Don’t over use.

-Layout should make sense and aligned well. Don’t over clutter.

Don’ts: 

-Don’t be too complex over the design. Make it easy to use.

-Don’t fill the whole of the web page. Leave space.

-Don’t use too many colours. Keep to a simple pallet.

-Don’t have bad colour choices (Example: Red and Blue)

-Don’t clutter up one page of the webpage. Space text and images well to create negative space.

 

 

 

 

 

 

Advertisements