Easter progression

The flowchart is now completed and I have finished first few pages of the site. I decided on the colours and fonts I want to you for the web. I chose plain white and grey which is more sophisticated look than bright pink. I looked at different fashion websites and realized that they are normally kept to basic in order not to distract the viewer from the products. The images are the most important thing on my website so plain white background will work perfectly. This is the flowchart I drew on photoshop:

After creating this flowchart I had a clear picture of how my site will look like and it helped me a lot when creating images on photoshop. The yellow ones are sub navigations and the purple are the main navigations which means they are available in every page.

Things to do:

1) I am planning to put my window pictures into the flowcharts, which Maria has put on the study space. I particularly like these two: 

This one is probably better but it also looks more complicated: 

2) Second task is to start collecting images and other necessary data for the website. That way once I learn how to create the site I will have all the stuff prepared and ready to be exported. 

3) Third task is to find the appropriate sound to my site. The website I will use would be: www.flashkit.com  

My first design for the Web site

I created this design by using Dreamweaver and Photoshop. I learnt how to slice up the image and hot to link it to other sites but I still don't know how to for example go back to the previous page etc. I am not sure if there has to be a button to take you to previous site or if someone clicks on "show the previous page" it will automatically appear. Anyhow this is the design:

And this is how I sliced the web by using these images as examples:

Also, these is another drawing I have done which I may use for my web (maybe instead of the sudoku game)

Follow-up

I finished composing the rest of the windows for my web. They are all basic but that's just a provisional ones. They go according to the tabs on the left hand side highlighted in red color:

This is the main page where by selecting the style you like, you will see what pieces of clothes you need to use to create such style. 

     

By clicking on the second tab, "Shopping tips" you can read about some good tips about how to shop or how to keep your wardrobe organized. 

 

"steal her style" is based on selecting the celebrity look and finding out what clothes you need to have to create similar outfit. 

After choosing the celebrity picture which we liked, the new window appears. On that window there will be the same, previously selected picture as well as an example of clothes that look very similar to the ones the celebrity is wearing. 

DO's and DONT's will just show examples of some bad taste outfits and an appropriate replacement. F.e Fur coats. There would be a picture of someone wearing bright pink fur coat with wholes in her tights and as a opposite look there would be a nice black fur coat with non-ripped pair of tights and nice skirt.  

Quiz is pretty self-explanatory. By following the pictures or answering the question, you will find out what type of celebrity you are.

The last tab will be a Game tab with simple sudoku game or a link to my blog. I am not sure yet.

The layout of the Web site

I created few design ideas using Photoshop and planned the layout of the website. I established what my website needs to include but I am not sure about the colors, fonts and the "cosmetic" side of it yet. The first picture presents the main window of the website. This will be the very first thing that appears when people view my site. The logo will be placed in the middle, right between two images or some drawings (not sure yet) Just below the logo / name of my website, I will put a little explanation of the purpose of this site and on the left side I will list the topics

of the site.

The topic tabs will be called: "styles", "shopping tips", "steal her style", "do's and don'ts", "quiz" and "games" Next to the main topic tabs I will insert an images which will change each time the viewer moves the cursor up and down the tabs. The images will represent a preview of the selected tab