Self Initiated Project – Competitor Analysis(further research)

I have decide to do extra research on competitors. This time I have decided to go onto 11 Hairdresser websites (which I haven’t previously saw) and find out what usually hair salon websites consist of.


What I have been looking at exactly is:

Main page – what hair salon websites usually have on their home page

Navigation Bar – what their Navigation usually/mostly consist of

Text Amount – amount of text reading on home page

Colours – Mostly Grey, black and white are used nowadays in web design. So I have been looking for use of these three colours

Responsive – whether website was responsive or not

COMPTETITOR

Links to visited websites:
http://www.spirithairteam.co.uk/
http://kayapati.com/demos/milan/
http://www.cssigniter.com/preview/beaute/
http://www.kiwasalon.com/
http://www.rush.co.uk/
http://www.francescogroup.co.uk/
http://www.browns-hair.co.uk/
http://www.sallyexpress.com/
http://bleachlondon.co.uk/
http://www.nickyclarke.com/
http://davidrozman.co.uk/

Self Initiated Project – Client Meeting

logo

First thing that I have done was meeting with my client. Because this is all for my Project and it is Self initiated, It was my OWN idea to revamp and redesign Irena Hair & Beauty Website. I have decided to contact owner of the website and let him know about it. I have briefly explained him, why I have decided to do something with the website, and following this I have told him few ideas of mine which I could implement, including totally redesigning the website, its content and creating content management system.

Content


I  have offered two options for my client when it comes to Content. I could either leave all texts as it is, and only update missing stuff (e.g. Price List or About Us ) or let client decide on what will be written.  I have presented ideas from my research regarding content, that people are more visual, and reading pure text over and over is boring.

I have looked on the internet for ‘Web content’ and had little read about it. I have found out that there are three things that has to be followed and considered in content. Is content usable? can user interact with what is on the website? Is content useful and How easy to access it is?

We have both agreed to it, and also I have mentioned that on new website, content will be added not by me any more but client will be able to do so, using CMS.
I have still plenty of time, we have decided that we will get back to content when it comes to Designing process.

design


This is where fun bit will start, as my client doesn’t know anything about Designing, especially when it comes to  following design trends,  Actually creating design of the website and composing it all into beautifully looking website.

I have informed her about current website not being Adaptive nor Responsive (previously explaining what these two mean) and that my plan is to make it fully Responsive, so it will be easier accessible through Mobiles & Tablets. Which also automatically means, that website might look different on PC, mobile and tablet. Because she didn’t understand why is that, when she wants only one website, I have told her it will work as three different versions on different platforms.

I have explained more less about  current design trends, that flat design is dominating, big pictures, or big block buttons are also very popular among many websites. I couldn’t forget about text its own. I told my client that less text will be better, and use Typography to make it more appealing.

My client said that she wants me to fully research and  do frameworks/designs on my own, and based on these we will discuss further options (next meeting).

 

colours


Not much to discuss here. I knew previously that Colours will have to stay the same and I was right. My client wants me to use same colours as used on the first website. The only exception is that I can use different variations of Orange & Black. ‘White is white’ – as she said, and changing it to darker would automatically make it grey. ‘so leave white as it is’.

colours ir

But of course I won’t, that is why I have meeting with her to discuss everything and show everything that has been done, so when it comes to showing designs I will most likely play with white colour, and present it to her.

accessibility


I have explained my client that when it comes to Accessibility, website is fully accessible if all people, including disabled and elderly people, can use it. If visitor is disabled, his accessibility will depend on how his disability will affect the way he perceives information. Firstly I have informed her about what mainly affects accessibility on web.

  • People that can’t see well – colours and the contrast between colours, size of text as well as font choice.
  • People who are blind – usually these people are using screen readers. Because these can’t read images, alt tags for images and title tags for links must be used, as these will be used by screen readers.
  • People with hearing problems – Any audio or video should have included subtitles.
  • People who find mouse or keyboard hard to use – this is where simplicity has to come. Make good use of big blocks (easier to see), and make it as easy as possible to navigate through whole website.
  • People who find words difficult – lenght of paragraphs, complexity of vocabulary, choice & size of fonts. opportunity to have text read out loud.

After talking about these, I have been asked two simple questions. Will it be hard to cover these points, to make website more accessible? If not, ‘How long it could take?’

There was no answer to any of these, because I simply don’t know and that research would have to be done in order to find out. In next meeting I will have to come back to this and let client know what could be done about it.

usability


I have told my client, that usability consist of balanced design, content and accessibility and that it can’t be attained in two days. It all depends on whether website is available, clear, credible, learnable and relevant to people who actually use it .

Good usability requires complex user research and multiple user testing done. In most simple words it is all about testing, testing and testing again.

cms


Explanation was required of what CMS stands for, what is it and how does it work. I have started by explaining that current website doesn’t use content management system and adding, updating any informations is done inside file, which then has to be re-uploaded to server.
However, using different type of code (PHP) another website can be created, which will work as a little system, where all information that are on the website will be there, ready to edit, delete or add new things.
I have told that CMS allows for adding dynamically content, which takes few seconds to do, and is much safer as user(client) doesn’t work with code.
We have agreed, that every section on the website should be editable, with option of adding images, editing these,their size and more.

After talking about CMS, client only told me that CMS should be even easier than website, which automatically told me that BOTH of these will have to be VERY easy to use.

rest


I have decided to write about ONLINE Booking Appointment System here as my client is bit sceptical, and she just can’t imagine how it might work and is afraid of learning how to use it, as she already predicts that this will be even more complex than website and CMS combined together. This clearly means that I will have to either research for simple booking system, with appointment system using calendar, or research everything about using website form to send request for appointment, and these would be received on mobile phone (SMS), but then I would have to make sure that it will be possible to answer back, and send reminder of upcoming appointment. I will try my best to come up with good idea..

There was supposed to be Polish version of the website, If everything go as planned, and i will have some spare time, I will translate text to polish and make Polish version of website.

4-elements website – Colour Palette

I am going to use only one main colour which is purple, but different variations of it.
It is a colour of good judgment, people seeking spiritual fulfillment. Often used
to symbolize magic and mystery, as well as royalty. Purple is believed to be the
ideal colour due it being combination of two warmest and coolest colors which are red and blue.
Also purple is is the color most favored by artists.

On top of that there are going to be colours of four elements, however i will be trying to minimise use of these.
For all the backgrounds and rest i will use different variations of black white and grey.

png colour pallete

Dynamic content website + quick research

Through 2nd semester, we have have been learning how to code using PHP, how to create our own Database and how to write code to either, pull out information from tables, update them, delete them or add new rows and more..

What we have learned was needed to work on another task for Interface & Interactive design. Which was was to create dynamic gallery website with use of PHP & MySQL, where user could use search box with select option to look for whatever he wants. Of course
we haven’t been limited to only these functions, as we could much more complex website in order to achieve better results.

I have decided to create gallery website with bikes and parts from which bikes are constructed. with a little bit of text, explaining different type of bikes and functions of each parts I have chosen to use.

So i have went onto internet and checked few websites with bikes, to see how they are designed, what colours are used and if there are any particular differences when it comes to creating website about bicycles.
Below are two websites that i have spent most of my time on, because of great design, use of colours and my personal choice.

http://www.giant-bicycles.com/en-gb/
giant website

http://www.specialized.com/gb/gb/home/
specialized page

Both of these websites have really great design, not many colours were used which makes these websites really clear to navigate. From these two I have decided to create my own design in photoshop. However I had to remember that these websites were made by professionals with different intention (promoting & selling) and are much more complex than my final design and website will be.

Improvements

So i have given my website to few people to have a little bit of play with the website and then at the end give me opinion, and what they would have changed.

from the feedback i have been given and from my point of view i made few changes and fixes

here is the list:

– when i have added hyperlink to buttons on my useful website page, blue borders appeared, so i had to get rid of them

– i have added a bit of padding-top onto every text container in useful websites as there was lack of space between line and text

– i have adjusted colours, font size and font family so on each page every text, title, line or button has exactly the same colour and size like on rest of the pages

– it was unable to go from home page to places to visit, as hyperlink was not working, i had to add new one and it is working now

– in places to visit page on left side i have changed the colour of titles to red and moved the line below pictures

and there was few more fixes but not so important to really mention them here.

‘previous’ final design of my website + little bit of info

So this was supposed to be my final design for my website, but after presenting it and having little conversation with lecturers and one of the students, i have decided to make few changes regarding the layout, colours and actually make a little research about using children pictures on my website, as there are some restrictions regarding this kind of pictures.

edu

as you can see I have used five colours on my website, these are blue, purple, yellow, red and green. My decision on using five colours (apart from white) was based on previous thoughts regarding target audience.
I was planning to make the website which would be used mostly by kids, so colourful website could actually be more appealing to them.
But after making few decisions and changing the purpose of the website, I have realized that target audience has changed as well. instead of children and kids visiting website most of the time, now parents are going to be main visitors looking for information.
This means that colourful website is not a priority any more, and i have decided to use only two main colours which are red and orange (with a mix of white and grey for text).

Brochure – which type? and colours

So, my task is to create my own brochure about me. It can consist of anything, but has to be about me. But lets leave this for now as first thing that I need to think about is which type of brochure I should use.

http://www.printaholic.com/15-brochure-fold-types/ – This website was great !

15 different brochure types to choose from, and i have decided to go with the most simple one:

brochure type

however i will also try out number three (link), as it seems to be quit interesting and a lot could be done with this type of brochure.

When it comes to colours, I am going to use green white and maybe black.
I had look at some of the creative brochures and there were two nice looking brochures with colours that I want.

Here is the link: http://www.printaholic.com/15-creative-brochures/

and number 5 and 6 are the ones that I am talking about. both of them have one big layout on both sides, instead of different on each page.
But because that wasn’t enough I just simply went onto Google images and typed in “green white black”.
Tons of pictures with green, black and white colours being used showed up.
Reason for doing such a simple search was to find out which kind of green will look best on my brochure, with a mix of white and black.

for example this brochure looks pretty nice, and instead of orange i could use green.
brochureee
But of course no copying!
just getting ideas.

digital design trends 2014 = changes to my current design

Some time ago, i had chance to see very interesting presentation about digital design trends in 2014.
(link: http://www.slideshare.net/taeskola/digital-design-trends-2014)
trends1

In my opinion it was not only interesting but also helpful, and made me change the way i want to design my new website.
Whole presentation is really useful, but there are two things that particulary have changed my mind after seeing this presentation.

First one is that flat design is a new trend, and actually it looks really nice and effective.
and actually i have realized that some time ago when using my friends phone (lumia) with windows operating system.
It had simple big and small squares as an icons with only one colour being used. I was really amused
by the fact, that something so simple and easy can actually look so awesome. After that i haven’t really thought much about that
until now when i found out that this is a new trend.

as an example below you can see how Apple has introduced flat design to their product:
trends4

After some little research i found out that flat design is a technique where very simple effects are used or even no effects.
Effects that are mostly avoided when it comes to flat designs are for example:
– drop shadows
– bevels
– gradients

Next thing are colours that are being used. there is actually less dark colours and most of the time bright and fully saturated colours are being used.
Also many designers are starting to use more than just 2-4 colours but they change the tone and saturation to match them up.

below you can see the colours that would be used more when designing flat interface or website.
trends5

Another thing that i liked from the presentation, is ability to create animation or motion using CSS3 and HTML5 without any javascripts or jQuery.
trends3
Because i found out that i can’t use children pictures on my website to create my automatic gallery due to some restrictions. I might actually have go with CSS3 and HTML5, check the new posibilities and try creating something simple, yet unique.

But it doesn’t mean that i will do everything i can to implement a bit of movement, it all depends on how long it will take me to write the needed code when i have go. And i can not allow my self to waste time on something that is not really needed.

So, what now?
first of all, i need to consider using same colours but change their saturation and brightness, to make them look more retro or monotone.
Also i need to think about my title, if i should leave the final design that i was supposed to use, or take two steps back where only a bit of shadows has been added.
and if i should change the tone of colours in title, to make it fit into whole website.

Now i need to have a look at some websites where flat design has been used, to see how it actually looks and maybe refresh my brain and get some new, nice and better ideas.

Website – early designs: part 2

Few changes has been done to my design. first of all i have added Home button on the left side, and removed ‘useful links’ section from the right side as i want to place this section on the main page.
Removed all the framings, and left only one line below nav-bar.
Because home section is currently selected, ‘home’ button is the only one touching the line below.
Because home button is orange, rest of the page will be also in orange colours.
as an example i have created three sections, where on top titles are going to be, and below more info/text.

3

Here i have expermiented and swapped colour of the containers with the colour of the background, to see how it would look like.
If i had done it that way i could either put the text in bright black colour or grey.
However, at the moment i think i will be using only white text, as i don’t want any dark colours being used on the website. but you can’t never stick to your first ideas/plans as later on we might realize that we’ve been wrong and it won’t work.
4

Website – early designs

Below you can see my first quick draft of the website, there is not much there, as even the navigation bar tabs don’t have correct names.
i have created some fancy buttons, with the colours you could see on the title.
4th and 5th buttons look different than the others as navigation bar will consist of two different sections.
above the navigation where the white space is i want to place my title.
You can also see, that 2nd button from right side is actually bigger than the others, which shows how it would look when user will be currently on that page. also the framing and colours of it are the same as the button, to add bit of effect, and help user know on which section he is currently.
Below navigation bar where this kind of yellow colours is, what i wanted to do is, whenever user goes to one of the section, for example the one that is currently visible on picture, colour of the background below navigation bar supposed to be exact the same as the buttons but with lowered opacity by 70-80%.
1

Here few things has changed, i decided to change the buttons to rectangles, and actually named them. to show that there are two sections i just added bigger gap between ‘places to visit’ and ‘about’
i also have removed framing around the title as this will look better i think.

Decided to leave background white, and add colours to small containers where text/pics etc. are going to be.

2