Starting web design Research

After coming back from Easter holiday we now have our new assignment which is to do with web design and moulding our ibooks into fully responsive functioning sites. To start with for this project i wanted to look at a variety websites and web design, which will help me gain a better understanding and idea of what i want my website to look like, as well as give me inspiration for the design and style of the website for my topic of earthquakes. This will also benefit me to know not only what i want the visuals to appear and look like on the different platforms but technically how the website will function as well on all of the platforms.

To start with i went onto Google and i typed in 'good web design examples' and was able to find a website which contained a lot of different examples of well designed websites, so i began flicking through the site looking for inspiration and scrolling through the examples until a few caught my eye and i was able to find a few sites which appealed to me, most of them being very simplistic and minimal layouts and styles.

Because the website we create is going to be responsive we have to make sure that the website is well-laid out and isn't too heavy on content as it has to be viewable on the iPhone and the iPad as well as a desktop or laptop, so to a degree it has to minimal or simply structured i the layout, and with mine i want it to be that, i.e. simple, minimal but well designed and i found some great web design examples which are quite inspiring.

Link to site: http://www.adamhartwig.co.uk

In this example above the website is very simplistic and very minimal with the hope page containing simple and clear navigation on the top right and type in the centre of the screen, making it the main eye catcher. 

the typography uses a san serif and what i like about the type on this site is how informal and casual it looks, which as a warm about this site and more based around design. Its quite bold and tall so it stands out, along with the white colour of the type. The background uses flat colours, which adds to a more simplistic style for a website, but works really well.

Within each of the pages they are even simple and but quite interactive and has a lot of movement which is what makes the website even more engaging and unique. Something I also noticed is that there is a lot of blank space within the site, however because the website isn't as big as a e-commerce site it doesn't need a lot of content filling in the space. Because this website is a personal site of someone and their work it doesn't need too more dynamic or over the top content which displays it, the less there is the more likely it is to be engaging and less straining. For my website I don't want the content to be over the top, so the main homepage in particular I want to look simple and be visually appealing towards someone who would come across it.

Link to site: http://themes.opendept.net/retro-portfolio/

Another website i found attractive was a nice 'retro' themed website, and the thing with this website is that the pages are all on one main page, and when clicking on the navigation it scrolls down to that page. This is quite unique and would work really well for a phone for someone who didn't want to have to scroll all the way down. 

The visual style of the site is really attractive and the navigation being always attached the top of the page even when a user scrolls down is a very good way of making it easier on the user and preventing them from having to scroll all the way at the top of the page to click on the navigation.

The colour scheme works really well within the whole retro themed site and the site occasionally uses icons to represent information, which is something I did in my ibook and is something i want to do in my website and the design, as i want the website to be more visual and engaging instead of bulks of text.

I really like the navigation system and is something i might consider, and something I also like is the logo of the site in the centre and displayed within the navigation and is something I will consider when I come to designing the layout and overall appearance of my site.

Link to site: http://pulpfingers.com

Above is another website I came across and what caught my eye about this site was the colour scheme. The reason why I gained an interest when i first saw this site was because just looking at it made me think of my ibook because of the colour scheme with the reds and white and gray/blacks.

I really like this site for its illustration and cute icons and layout. It has a very simple flat design look about it which is why it reminds me so much of my ibook and the visual style i created for mine. The colours on the page work well and the red isn't too strong on the page and work well against the white text and black/gray illustration.

The illustrations are quite similar to mine in that the page uses a type of building skyline illustration on the bottom of the page, and also the page uses cute, small icon illustrations to refer to certain things about this site.

At the top of the page it uses a slide show type of rollover which displays what the website does which is a good way to introduce the type of site it is and creates a very engaging way to come to a website for the first time. The navigation is around each side (left and right) of the banner/ logo of the website and is a great way to display the navigation as well as putting focus in the logo of the website.

Overall the website is quite small and has some very amazing visual style appeal to it and uses a good colour scheme with muted colours so it doesn't overdo it with too bright or sharp colours which is a benefit, as it allows people to enjoy and read off the website, as well as not straining people's eyes. The illustration and layout of the website is really well done and creates a very simplistic and flat style to the site on a whole which is a god thing.

It defiantly reminds me of my visual style for my ibook, so this will be my inspiration as well as many other websites, but i will keep looking for more to give me ideas and inspiration when design and thinking of the way I'm going to lay out my content as well as how it will visually and physically function for the users.

The only negative with this website is that it isn't responsive, however this doesn't detract from the inspiration that this website has given me.