Research (5): Plugins

I thought at this stage it would be useful to explore plugins and themes I could use while in my website, so I conducted research to explore what kind of plugins were available in regards to extending and enhancing bootstrap.

This article titled “50 Must-have plugins for extending Twitter Bootstrap” was a useful place to start as it detailed a huge range of plugins that I could potentially use. Although some were not relevant to my website, such as creating a database, it was interesting to read about the range and I have decided to incorporate Bic_Calendar into my site.

I was intending to incorporate a calendar, however was unsure about how to do this. Bic_Calendar provides an easy and clean creative-commons calendar plugin to solve this issue. A reason I chose to use this plugin is because it has three different options for event details – which are different colours. I want my calendar to display all the information without the user having to navigate away so I will be using the blue feature.

An additional feature I want to include on my website is an image slider. Thankfully there is a range of image slider plugins available, but it is imperative that the slider on my site is responsive.

WowSlider is a responsive slider I came across in my research, but it has to be installed onto the computer. This may not be suitable as I plan to develop the site at university and I don’t have installation privileges. It has a lot of different options, however, which is beneficial.

dbpasCarousel is another slider I came across while researching plugins. It is interesting, as you can put text into a slider, but it is kinda ugly with the large lines (which I am trying to avoid in bootstraps native slider).

I have ultimately decided to use lightSlider as it is not too busy, has customisable options, is responsive, and seems easy to install.


At this stage these are the only two plugins I think I will be using, however I have not fully started coding yet so am still unsure. I may extend the website further by using additional plugins, but I tend to have ideas on how to do this while I am coding.


Research (4): Optimising UX

What point is great design if users cannot navigate your website? I have learnt that it is important to integrate user’s needs into all development stages of a website.

J6Design emphasises the importance of finding the crossover link between users needs and business needs.

When design a site, J6Design says we should step into the users shoes to see what they want to get out the site. Ideally you want to look at current site analytics to observe what current users are doing on your site, and where they are going, so you can optimise their experience. However, not having access to this information (or when building a new site) this cannot be done.

Instead I imagined why someone would visit my site, who they would be, and what they would be looking for. This produced the following chart.

I am going to keep this brainstorm in mind when creating the homepage of my site – as Matt mentioned in class that the homepage should display or direct users to all the important information that they may be looking for.

When developing a site, SmashingMagazine recommends usability testing is carried out to ensure that potential users can find what they may be looking for. This is something I may investigate doing (when I actually get around to creating my site).

After carrying out testing and investigating user needs, through my research I have learnt that it is important to actually listen and take this information into account. Having previous designed pages and websites in this class I know that I am pretty stubborn surrounding my development and design – if I like the product then it’s good. But that isn’t actually the case. The easier your site is for your customers, the more likely they are to spend time on it and use it.

So i’m going to put extra effort into ensuring the site I create is user friendly, easy to navigate, and would not push away users.

Research (3): Similar Sites, Navigation

Something that I want to develop well for this website is the navigation aspect, and while creating my site map I thought it would be valuable to look at similar sites that are easy to navigate. As per my last research post a lot of school sites are bad, so I have extended similar sites to include universities which should be better designed since students pay lots of money to attend.

– – –

A site that I was really impressed with is Unitec‘s. It is nicely designed, with a common colour, the homepage provides useful information, and it is responsive. In regards to the navigation aspect on the home page the top links don’t have sub-links which is quite interesting to me. Scrolling down the page you can find links such as upcoming events, apply to study, scholarships, social media links, and even a link to the site map which is simple and on theme, but not visually unappealing (last image).

Screen Shot 2014-10-07 at 5.40.55 PM Screen Shot 2014-10-07 at 5.41.25 PM

Upon clicking on a link at the top the colour scheme of the page changes, which I found quite interesting. And each page has it’s own “home page”, with the same layout as the actual home page.

Screen Shot 2014-10-07 at 8.57.41 PM Screen Shot 2014-10-07 at 8.58.06 PM

The colour change seems a bit unnecessary but is kinda neat. I don’t think this would be necessary for a primary school website, however, because it does not have as many students and also it needs to maintain specific school colours throughout the site. Back to the navigation of the site though – it is actually quite hard to navigate with the links within pages scattered in the pages. The top navigation bar is great, straight-forward and pretty. Of course you can always search for what you’re looking for, or visit the site map, but the scattered links does not appeal to me at all.

– – –

Massey University‘s navigation is a little more structured (although their site isn’t as pretty – but it is also responsive).  Clicking on a top tab pulls a drop down with sub tabs and sub sub tabs. Again, not super pretty, but very effective. Although I’m not looking to create this many pages for my assignment, there are quite a few pages on the MVS website and the pages definitely need to be well classified. Thus I will keep in mind how this site has been categorised – although obviously it is not the same as a primary school.

Screen Shot 2014-10-08 at 6.19.09 pm Screen Shot 2014-10-08 at 6.19.20 pm

– – –

Otago Uni has a funky little banner housing their links – with a pop out on the home page (which has a weird shadow and doesn’t really suit the rest of the page design in my opinion). Upon navigating to a page the links change to show the main page links, but you can click or hover over “otago home” and it will bring up the normal links. There are also a ton of links in the footer which is quite overwhelming… It seems like noone knows quite how to organise and display lots of links effectively without making it look gross….. I do like the idea of a ‘quick links’ box though.

Screen Shot 2014-10-08 at 6.28.36 pm Screen Shot 2014-10-08 at 6.30.21 pm

– – –

And then we come to AUT’s navigation, which on the home page isn’t all that bad (I’m talking navigation specifically, not the design of the entire site, lets not go there). I like the two sided drop down navigation, and the separation between the two different areas within the main navigation option. However, once navigating to a page from the top bar the navigation breaks and the links don’t drop down. The menu bar down the left on the pages is quite helpful, although ugly. It gives the user a grounding of where they are on the site. It’s just a bummer that the main navigation breaks once the user isn’t on the home page. Good job AUT.

Screen Shot 2014-10-08 at 6.33.56 pm Screen Shot 2014-10-08 at 6.34.06 pm


Research (2): Similar Sites, Home Page & Layout

After looking at a lot of Auckland school websites (Primary, Intermediate and High School) I have come to the conclusion that school websites as a whole are gross. I suppose that children have to by law go to school so parents tend to send them to the school in their area, but this shouldn’t be an excuse for the school to have a poor website – especially if they teach digital technology.

Thus, for your pleasure and my own, here is a stream of not very attractive looking websites with some comments. By looking at poorly designed school websites I will be very aware of what not to do when I design my site.

Screen Shot 2014-09-30 at 3.20.42 pm

I have discovered that there is a New Zealand company that creates school websites. The site above was designed by the same company that designed MVS’ website… I’m not sure why they are still in business. It’s not very appealing. But if you are a fan of rounded corners then this site is a blast. (And they don’t know what hover states are apparently??).

Screen Shot 2014-09-30 at 3.21.26 pm

The above site was also designed by the same company, who apparently likes gradients and ugly patterns. This home page is more informative than the previous ones, and doesn’t use as many fonts which is positive. But why is Staff contact details the only link that isn’t fully capitalised??


Screen Shot 2014-09-30 at 3.19.52 pm

This website (above) is for one of the newer schools around the area I live in. It’s not super terrible, but the menu bar and top bar are quite cluttered and the website looks boring. The video doesn’t really command attention, and doesn’t look like it’s been stylised.


Screen Shot 2014-09-30 at 3.22.12 pm


Considering the above site is for a newer high school, the website looks very outdated. I will not be using a colourful border, or shadows, or white on grey. The content is not aligned properly  and the latest news box hasn’t been coded nicely so the links run off the site and behind the third box. I’m also unsure why a school website would have a “what’s hot” box. The homepage content doesn’t seem to be what a person visiting would be looking for. Looking at this site hurts my eyes.


Screen Shot 2014-09-30 at 3.23.31 pm

Kristin‘s website isn’t too bad (above) compared to some of the earlier sites. It’s not responsive, though, and has gross drop shadows and different length boxes that throw off the design. The home page is very informative and has a lot of useful links, which I will keep in mind when designing our site.

Screen Shot 2014-09-30 at 3.22.49 pm

Screen Shot 2014-09-30 at 3.24.10 pm

Perhaps the only nice school website that I’ve come across is Rangitoto College, which is even responsive. I like the website links, and how content is organised on the site, which I will keep in mind when designing my site. The home page has a lot of information that someone visiting the site would need.

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)