Interface & Interactive Design

Presentation

Where did I get my website idea from?

• Lack of idea for random website production

• Took me two weeks to realize that I can do website for my Mom

• Accepted the challenge and the nightmare has begun..

Beginning: Research

Research: Hair salon Websites

• Because my Mom has Hair Salon, I had to look at many Hair salon Websites

• Some of them were good and some as good as internet Explorer

• There is only one website I have used something from it http://www.caprioshairstudio.co.uk/• I have created Similar footer that you can see on this website

Research: Hair salon Websites

•EVERYTHING else was designed, created, wrote by me, including code and content. Apart from JavaScript which I have used for my Gallery on front page.

Beginning: Design

Designing on paper

• First of all I have decided exactly on what I want on the Main page to be so I could know how many “boxes” should draw• These are my first drawings I have done

Designing on paper

• First of all I have decided exactly on what I want on the Main page to be so I could know how many “boxes” should draw• These are my first drawings I have done

Designing on paper

• From that point I knew more less how the website will look• During working on the website design has been changed

many times till I found the PERFECT ONE.• These are the drawn designs of other pages:

Design: Content• Previous website of Irena Hair & Beauty Salon had lack of content• I have decided to add much more text in every section of the website• So I have spent one night thinking, writing and visiting thousand websites

(about sunbeds/hair extension/hair salon/beauty salon and more) to see how the text could be written.

• And here is my written content on the paper:

Design: Colours

1. pure black i have used in the header and in every container that has any kind of content inside.2. dark grey i have used for the background of the whole page (not the content)3. bit darker grey i have in the main container.4. white i have used only for text, title and logo.5. orange i have used for some parts of the text, in title, logo and all borders.

Code

•When it first came to writing any code I didn’t even have clue what container is•With a bit of help from others It all started•Many times staying after lessons learning how to code

How it looks in practice

www.newmedia.artdesignhull.ac.uk/dnagorski/interfacedesign/index.html

Problem solving

• At beginning I had problems with everything, but these are main problems I had:

oHeaderoWebsite goneo Internet EXPLOder (Explorer)oText for the website

Further Development

o Internet explorer (borders)oYoutube video (opera)oNavigation Bar oPolish versionoOverall improvement with new ideas