Work In Progress: Week One

This week I have been thinking about what I will do for this assignment. The brief says the website should be for a prominent New Zealand organisation, however I don’t want to choose one that is too well known as I’m not keen on doing the same organisation as another student. I also don’t want to do an organisation who has a website that is already nice looking, or not too bad. I want to redesign a website that is initially gross and very unappealing. Thus I have decided to redesign Marina View School’s website (after confirming it was an okay organisation to do with Matt).

Screen Shot 2

Screen Shot 1

It is visually unappealing, the homepage doesn’t have any useful information on it, the pictures are not very good quality, the menu is undescriptive, and it’s not the slightest bit responsive. All in all it is a pretty bad website. Let the fun begin.

Research (1): Bootstrap

Over the break I familiarised myself with bootstrap as a website framework, and played around with coding basic webpages using the bootstrap boilerplate which I found relatively straightforward after becoming familiar with the naming conventions. I found the CSS page of the bootstrap website extremely valuable in this regard.

– – –

After exploring bootstrap I looked at websites created with the framework to see what other people have created using it as a basis. A website that I discovered that I like, and thought was interesting, is studiompls (pictured below).

Screen Shot 2014-09-27 at 4.36.32 pm

 

Screen Shot 2014-09-27 at 4.43.05 pm

Screen Shot 2014-09-27 at 4.43.46 pm

 

  • I really like the full screen image carousel on their home page (top image). I think this is effective for a design company to showcase their projects. I’m not quite sure about the mouse effects on it when you hover over the image – the mouse turns into large arrows at certain points on the image. While this is probably impressive code I’m not sure how necessary it is.
  • After scrolling down the menu compresses itself, but remains static at the top of the page. I think this is quite cool. I like the idea of static menus, however the one pictured is too large and would take up too much of the screen. The logo also turns into a ‘to top of page’ arrow button which is kinda neat.
  • I quite like the overall design of this page and how the elements are positioned. (Second image, from their about page)

Unfortunately their website isn’t responsive (their 404 page is pretty though).

– – –

Danielle Draper’s site is also built using bootstrap, which I find interesting as it is a website I previously researched for WMP1.

 

Screen Shot 2014-05-20 at 3.17.55 pm

 

Screen Shot 2014-09-27 at 4.52.58 pm

  • I like the colour design of this site, it is very basic which makes the jewellery she is selling standout.
  • Her website is nicely responsive, I like how the menu breaks down (which I have discovered is easy to do using bootstrap)
  • I don’t like the shadow hover states she uses over box items, I think it looks out of place compared to her flat design elsewhere.

– – –

Another site that I like the design of is Markt, an online POS software.

Screen Shot 2014-09-27 at 4.55.32 pm

Screen Shot 2014-09-27 at 4.56.23 pm

Screen Shot 2014-09-27 at 4.56.10 pm

  • I’m a big fan of the overall design of their site. I love the flat graphics and the simplicity of it, as well as the combination between images and graphic design.
  • I like that only one font has been used throughout the site.
  • The website breaks pretty badly when the page is resized though.

– – –

Finally I also like Sculpt Media‘s site (although it takes a while to load and the first time I visited it wouldn’t load at all)

Screen Shot 2014-09-27 at 5.29.52 pm

 

Screen Shot 2014-09-27 at 5.30.26 pm

  • On the home page, while at the top of the page, the menu background colour changes in accordance with the image carousel which I think is cool.
  • The overall design of this website is very pretty and visually appealing. Although I would hope so because they’re a media design agency.
  • It works effectively as a full size website as well as when it is resized, and the top menu collapses nicely.
  • This website also has uses some very simple but attractive javascript / jquery animations while scrolling and on initial load (when it loads that is)

Browser Test Report: Javascript Only

operajs

operanojs

 

Tested in Opera 16.0.1196.73 using Windows 7 64-bit

 

chrome.js

 

 

Tested in Google Chrome Version 36.0.1985.143 using Windows 7 64-bit

 

Again all the same differences, like on the JQuery gallery . Opera displays the captions slightly smaller than Chrome, it looks like the pixels render slightly smaller. Disabled javascript galleries have slightly smaller captions even though it has the same css. Images in Opera seem to display sharper than Chrome.  Aside from that both galleries display the same.

Browser Test Report: JQuery

opera_jquery

 

Tested in Opera 16.0.1196.73 using Windows 7 64-bit

 

 

chrome_test_jquery

 

Tested in Google Chrome Version 36.0.1985.143 using Windows 7 64-bit

 

Opera displays the captions slightly smaller than Chrome, it looks like the pixels render slightly smaller. Images in Opera seem to display sharper than Chrome.  Aside from that both galleries display the same.