Work In Progress: Week Six

So at the beginning of the week my website was looking a little like this:

progress

progress2

map

And now it’s looking like this, is fully functional and responsive, and is informative.

faq

Overall I’m pretty satisfied with the final product. I decided not to over clutter the pages with a logo, and instead just referenced the school in the menu bar. I used images of the school as header images, which I think are worth showing off as the school is quite pretty – it has a lot of garden and art, however I decreased the size from the theme as I didn’t want to put titles over top of the images. It didn’t look nice when I tried it, so I’ve got the information under the main images.

login

I had some differences with the footer, as I felt like the image above was over cluttering my page content, so last night I got frustrated and deleted it and have never looked back.

homepage

I’m a bit ambivalent about my home page – I couldn’t get it how I wanted and wasn’t really sure what I wanted. It’s better than the current site home page, but had I had more time I think I could have improved it, but I hit a wall creatively and am ready for a nap.

– And then, with 10 minutes until hand in was due, I edited my home page. Because logic. Now it looks like this and I am happier – 

newhome

Content Sources

Website template, as base of site: http://www.gettemplate.com/demo/progressus/ 

Calendar plugin: https://github.com/xero/bootstrap_calendar

Pop up plugin (used in parents area and contact form): http://www.jqueryrain.com/?BlLWL8ij 

Image carousel plugin (used in about page): http://sachinchoolur.github.io/lightslider/examples.html

 

I also used the following image sources:

Placeholder cats 1 and 2 (as student pictures):  http://placekitten.com/300/320, http://placekitten.com/300/315

Backpack fashion, used as header image: https://www.flickr.com/photos/56380734@N05/7651703666

Student pictures on sliders: https://www.flickr.com/photos/56155476@N08/6660098369, https://www.flickr.com/photos/56155476@N08/12612079335/, https://www.flickr.com/photos/chrisyarzab/5659535221/in/photolist-hR5fq9-hR5okq-4EuvkH-7mzJJA-cvhi8A-6DtKFh-7GG2wi-4ByTtR-pvjSTA-7jPtyG-cgKSa-6BSzXT-5km4xS-6TsL8r-sb6e6-9C7ADt-f7i4Gz-dge7Y5-4wjLr5-63ik9q

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.

Work In Progress: Week Five

This week I have begun coding (finally). I also finally ran into the logo problem, which I was hoping to put off. I don’t intend on asking permission to use content from the school, and frankly don’t find the current logo(s) super appealing so don’t intend to use either. [Pictured below].

logo1 logo2

For the design I have chosen the image needs to be wide and short, rather than a circle, so I am going to redesign a logo based on the school’s title.

But, because I plan on making the header blue I am afraid this might clash. Because I don’t like the current logo, I didn’t try to edit it and instead decided to go in a different direction. I created this tree, as a symbol of growth and learning. I am going to use this as my favicon, and perhaps within my site – but I am afraid of it being over cluttered.

 

tee

I have decided to use the red and dark blue out of this kular wheel I generated.

screen-shot-2014-10-18-at-1-09-44-pm

I will also be using this green on buttons, which is linked into the favicon. I think this is brighter and more fresh than the middle color above.

 

Work In Progress: Week Four

I have been brainstorming and sketching wireframes before I hit the computer and pump out a full mock up – resulting in the following ideas on paper.

I roughly put down my ideas for the consistent site design (the menu and footer that will be the same on everypage). Apologies for sketchy focus and seemingly terrible quality.

At this stage I’m definitely leaning towards footer number three – it displays all the information I would want in the footer and provides a secondary navigation, plus contact information.

I’m not a big fan of sidebar navigation as it is in mock up 4, but thought i would try it out. I don’t think i’ll go in this direction, though, and am leaning towards menu 2 or 3. The current logo is a circle but the current logo is also not very attractive. So i’m thinking I would make the title of the site the ‘logo’ as such by using mock up 3 because mock up 2 seems a little bit iffy to me, it could go either way (really pretty or really ugly).

I also threw together a page mock up for the location page, however decided to computer mock up my consistent site design before mocking up the rest of the content pages as I want it to complement the navigation – so need to first design the navigation.

 

Also I have discovered maroon is a very gross colour to put in a colour scheme.

Screen Shot 2014-10-18 at 1.07.03 pm Screen Shot 2014-10-18 at 1.08.00 pm Screen Shot 2014-10-18 at 1.09.10 pm

But I think this one is the least puke worthy, with maroon and dark blue being the main colours cause they’re the school colours.

Screen Shot 2014-10-18 at 1.09.44 pm

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.