After having looked at various different websites, especially those similar to the website I aim to create, I wanted to start by creating an array of thumbnails that would allow me to explore different layouts. I knew how I wanted my website to work, and what I need to have on my actual website. These are my initial ideas:
At this point, I am starting to have some ideas about how I want my website to actually look. I decided to draw up my three main ideas thus far; these will be taken into my next web session and I will be given feedback on them.
1:
2:
3:
From the feedback that I received it was made clear to me that the most effective layout was number one, yet there were aspects of it that needed altering. I was informed that it looked too busy and cluttered, which I think was mainly due to the way in which I had drawn out my thumbnail. With there being a lot of boxes it may look a bit chaotic, but these boxes will be words or text and therefore won't look bad. However, I then went back to the drawing board and began thinking about navigation and how the pages of my website will all be linked; for this I consulted my flow diagram.
I really liked the design below, and felt it was the most appropriate for my website. It has a title at the top right, with a small about section below it along with all of the buttons to navigate to various pages. The menu on the left would be fixed with the images scrolling up and down. However, I am worried that these images would be too big, and think that having another column would be much more ideal.
After having tried out a few variations of the same thing, I decided that this was definitely my favourite outcome. It now has three columns instead of two, which I think should allow me to have more freedom in the images I pick, instead of only picking images large enough to fill two columns. The dotted lines represent the points at which the images will become hidden, preventing the images from being visible all the way to the edges of the screen.
With this layout, I then began making some digital mock ups, playing with little aspects of the design in order to create something that I was happy with.
I then created wireframes from my digital mock-ups, in which I just placed a grey box where ever an image or text would be placed. From this, I could then easily work out the exact measurements of everything, including its positioning on the page. This should hopefully help me greatly when it comes to the coding of my website, as I won't have to make stuff up as I go along.
As you can see, I have been very precise with my measurements as well as keeping it fairly simple for myself. Despite never having done anything like this before, I was quite good at maths and this hasn't been too much of a struggle for me. From here, I then just have to start inputting my numbers into Dreamweaver and hopefully everything will go done without too much trouble.
I also thought it would be a very good idea to create some digital mock ups of how my website would look, as this would give me something to reference to as well as making it much easier to show people how my final website will look. Using the wireframes and thumbnails I had already created, I went about creating some mock-ups of my final website:
Homepage:
Category Page (Typography):
Rollover Image:
I also created a gif to show how my images will scroll whilst my menu is fixed. I felt that for the crit this would be an effective way to show my idea without actually having to code the website yet. (When the gif pauses, that is when it stops and starts again)
No comments:
Post a Comment