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.

Work In Progress: Week Two

As I mentioned in my WIP last week I have decided to redesign Marina View School’s website. Before beginning the design stage for the redesign I thought it would be valuable to analyse the current site (it can’t be all bad, right??).

Screen Shot 2014-09-30 at 3.12.27 pm

When I looked at the website I wrote up the following notes that I can’t be bothered to type up.
image

I also drew up a site map for the current website to get an idea about what kind of information is on the site, although this didn’t really help because the titles are very indescriptive and there is a huge amount of content on the site which isn’t super necessary.

image

This week I also took some pictures of the school which I’m beginning to edit. Because it is currently the school holidays I was able to take pictures of the classrooms. Ideally there would be school children in them but I don’t really want to get into privacy laws surrounding this so I need to consider what I will do. I don’t want to use the current images either because they are low quality and not the greatest.

Digital Media Project: Assignment 2

For the second assignment for Digital Media Project I am in a group with Jenna Smith, Jessica Nutley and Kelly Hyslop. Our client is the Titirangi Festival of Music, for whom we are redesigning a website.

Capt2323ure

Titirangi Festival of Music’s current website

 

 

My role within the project

My role within our group is as the Technical Director. As someone who is not so secretly nerdy this role suits me because of my love for technology, as well as my somewhat extensive knowledge surrounding our project area of web design. I work mainly with Kelly, the art director, as we are the two team members focusing on the development of the website whereas Jenna and Jess are more focused on the client and documentation side of the project. Despite this working split we all ensure that everyone is kept up to date with the status of the project, reporting back on our group Facebook page, as well as by having weekly team meetings.

 

My tasks and contribution within the project

In the beginning of our project I set up our communication channel, opting for a Facebook group because all of our members regularly check Facebook.

Capture1

 

I also set up a shared Google folder for our group, due to the success and ease I had using Google Drive for my previous project. This enables us to edit documents online, with stored revision history. We can access these documents anywhere and can share it with others not in our group if required.

Capture2

 

Admittedly in the early stages of the project I had a hard time adjusting to not being the project manager, a role I tend to adopt because I like to ensure everything is running smoothly and on time (as may be evident with me setting up communication and documentation channels). In order to be respectful of Jenna’s role as our project manager I have had to actively ensure I step back and allow her to manage the project in her style. This has been challenging for me as I am quite a perfectionist and would be what Belbin describes as a solid organiser.

Within my role as the Technical Director one of my main tasks is to undertake research surrounding the website redevelopment, such as what web development tools we should use, what programs we could use to do this, where we should keep our shared code, and other tools and resources we could use. During these stages I take on the role as what Belbin describes as the explorer.

In the development stage of our project I proposed to the group that we use bootstrap framework to assist with the coding aspect, and make the responsive feature of the website easier for us (before we had all learned what it was in our web design class). I also suggested that we use github as a place to store and collaborate on website code. Due to developments in the project, as will be detailed below, we have decided not to use either of these resources.

bootstrap

While writing our first proposal my group imagined that we would be coding the website from scratch, which would be another main task of mine. This has since changed after being in contact with the client, however, as we discovered they would need to be able to easily add content as they would not have much of it ready before the project was handed over. Unfortunately it was only two weeks ago that we discovered this, as we had initially been in contact with someone who is not directly involved with the website development. The client also informed us they would like the website we develop to be similar to their current website, which was not online when we initially scoped out the client. Both of these developments meant the previous research I had done and mockups Kelly had created are no-longer of use, and we have had to write another proposal. This has delayed our project considerably, however we have adjusted to the changes and accepted it as a part of the process.

As a result of project changes Kelly and I decided that to ensure efficiency and ease for the client it would be best to encorporate a CMS (content management system) into the website we develop so that it is easy for the client to upload content after we handover the website. We looked into using WordPress.com, Joomla, Weebly and WordPress.Org. Ultimately we have decided to go with wordpress.org because of the range of themes and plugins available that we can develop and manipulate with more freedom than the other sites. Unfortunately no one in our group has worked with wordpress.org before so we have had to go through testing before sending an updated proposal to the client, to ensure we could do everything within the framework that we needed to and believed we could do. Thus I set up a free test domain and hosting site using the website Altervista. Although I had not used this website before, I decided to go with this site over other free domain and hosting sites because of the benefits it had in comparison to other sites, which I discovered using a handy wikipedia chart shown below (and then doing further investigation to ensure it was correct, because never trust wikipedia).

Capture.4PNG

I had to install all wordpress.org files through the back end of altervista (image below), and couldn’t bulk upload because it will not upload folders which has added time to the project – but we could not have tested wordpress or our chosen themes without going through this.

Capture

By using this site we are able to test and manipulate themes and plugins that we wish to use (such as the photo gallery slider, potential directory plugin, and free layout – all solutions that I found and installed and have recorded on a google document, top image) and multiple team members are able to log in at anytime to see test progress (second image).

Capture23

Capture4

 

This is where our team progress to date stops, as we are awaiting communication from our client. We have sent an updated project proposal, as well as website mock ups, and requested to work directly on their hosting site and server so that we do not have to use a free alternative (which is only suitable for testing). We are hoping to receive good news by the end of the week so that I can contact their website host to set up an additional sub-site for us to work on – our team decided it would be best if I was in contact with the website host as I am the most involved in the technical aspects of the website.

 

Time management

In regards to time management I think I have been doing a pretty good job individually, as has the entire group as a whole. Since we recieved the project we have aimed to meet weekly as a group, which has helped us to keep the project rolling. We took a two week break over the uni break, in part this was because I was out of the country for two and a half weeks. We did not have anything to work with, though, as our client has also been overseas.

Our project is not at the stage I would like it to be, however this is not our teams fault as we have been slowed down significantly by the client, as previously touched upon. I am eager to get started on the main part of the project, as I do not want it to be left until the last minute.

 

Reflection

Although this project still has a long way to go before it is finished, I have learnt a considerable amount in the time we have been working on it. I am very aware of how much I like to be in control of things, and am not very good at delegating tasks because I would rather do something myself to ensure it is done to the standard I want it (so it’s good that I’m not the project manager). I have become more aware of my passion for finding technological solutions to problems, such as by finding resources to use as detailed above.

I have learnt to lower my expectations of our client, as they have a lot going on and our project is not their priority. Initially I had envisioned they would be able to respond to our questions immediately and tell us exactly what they wanted, however this has not been the reality. This project has definitely been a learning curve for me, because although I have worked with clients on digital projects before I have not worked with clients of this nature before. The way the client has been handling our project has been a bit off-putting, as I feel like they might not even decide to use our website redesign so it is hard to want to put in 110%. Despite this I am trying not to become discouraged and am looking forward to completing the project.

Website Proposal

1.0 Client Organisation

The client who I am redesigning a website for is Marina View School, a primary and intermediate school for year 1-8. Their current website is outdated and not-responsive, and hence I will create an updated, cleaner site for them. I am not going to seek permission from the school to use their current content or logo, instead I am going to rebrand the site from the ground up.

marinav

 

 

2.0 Project

Marina View School is a state primary school, and the website will be created to promote this, while also informing users who visit it. It will be very heavily information based, as those who visit will likely be visiting to find out about the school, however the site will also incorporate images of the school and students.

 

3.0 Site Users

Site users are likely to be in one of two categories, current parents and prospective parents.

3.1 Current Parents

Parents of current students are likely to visit the website to find out information, such as school dates, or information about their children. It is very likely they will also be visiting to get in contact with the school. Thus I will ensure that it is easy to find contact information for the school, placing it on the footer of each page, as well as dedicating a page to it. To help the school manage communications I will encourage parents to report absences via the contact form on the website, however if parents have an urgent message I will encourage them to call the office.

As we are moving to rely more on computers I am going to include a specialised parents are, where parents will be able to view specific information about their child(ren). I will include an area where children’s progress reports can be viewed online, as well as student information so that parents can check that their contact and allergy information are up to date.

3.2 Prospective Parents

Prospective parents are likely to visit also seeking information – thus I will create a dedicated place for enrollment. If the site was extended this could include a variety of pages, however I will only be including a frequently asked questions page. To ensure that I don’t overcrowd viewers with information I will put this information inside an accordian which will reveal information when clicked on the header. Additionally, I believe prospective parents would like to learn about what Marina View School stands for, thus I will include a brief summary on the home page with more information and images on the ‘about’ page.

 

4.0 Site Content

As detailed above the site content will be heavily information based, for users who are wishing to find out information. This will be displayed in an easy to navigate menu (unlike the current site). Images will enhance the site, and make the site more visually appealing for the user.

Content on the site will be displayed logically and clearly, as parents are busy and need to find information fast.

 

5.0 Site Theme

The current website follows the school colours very strictly, which I do not plan to do as heavily. I will use the blue school colour on the header and footer, but I will use white a lot on the site as well. I will use the maroon colour on hover states, but it is not the most appealing colour so I do not plan to incorporate this as much into the site, unlike the current website.

The site will be very consistent, with a header and footer on every page, as well as a header image on most pages.

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.