After researching existing web layouts, from my thumbnail sketches I have come to the conclusion that the format of my website will have the content centralised, with the heading at the top left corner, and the navigation bar at the right hand side. Headings, content, and navigation bar will all be level at the top. In order to start mocking up my digital scamps of the website, it is important to create a grid to use when laying out my content. On illustrator I used the rulers to create my working space, so that the layout is consistent on each page, for the crit I have used illustrator so I can create the visuals needed to show my peers what my website will effectively look like.
This screenshot shows where I have placed the rulers on illustrator, using the measurements in cm on the x/y of the art board I have created a space in the centre with the same width of negative space either side of the content area. The rulers will allow me to work within the centre of the page and not exceed out of this area, this is important because each web page needs to have the same content area, if anything exceeds the ruler marks then the website will not be consistent and the layout will need to be changed.
It shows how I can start to arrange content within the centralised working space, and also how the titles could be placed in the left margin.
Below shows an archive page, showcasing a particular designers work. Knowing that my content needs to be central, using the two images and text box (placeholder text for now) I have aligned it so that it fills this space entirely on this screenshot, another set of images and text will be repeated below this. Originally the text was centrally aligned as shown below, however I will need to change that so that the body copy will reach the rulers either side. I want to do this because if the content fills the area it will create a cleaner aesthetic for the page, and will have clean lines right the way through. This is something to consider for each page, which will allow me to keep the consistency throughout my website. The images that I am using have been carefully selected therefore they allow this content area to be filled when they fit next to each other without the images being stretched so that they don't loose their pixel quality.
The typeface for the title shows a script style font, however it is more legible than most script fonts as the weight makes it clearer. Looking at it as a title below I am not so sure how it looks, as it is rather boring and at this present time irrelevant to my design. I could develop the titles so that there is a subtle drop shadow, maybe using a colour from the swatches I have chosen to work with. This definitely needs work as it doesn't really work at the moment. The body copy shown on this screenshot is the same as the title typeface, this will be changed throughout development to a sans serif font as it does not work well for the body copy.
Crit
Below shows the mock ups taken to the crit. At this point the idea was to have our visual mock ups pretty much finalised, ready to code for web, however I still need to do a sufficient amount of work on my web layouts before I can begin to code. This homage below needs the title of my website adding, and also logo. At this point in time my logo/title is none existent, which is why I found the crit really helpful as I was advised to take a few steps back, analyse the purpose of my website and identify the target audience again, which will then make the design process of my logo much easier and relevant to my website. I have mocked up a rough example of how I could layout this page, however until I have my logo finalised, the layout of this page can not be completed. From the crit I was given good advice to help me along the way to do this, therefore I this is the first thing I will reconsider before I can develop these layouts into finalised visuals.
This shows the webpage with a collection of my own photographs that I have edited slightly so that the colours are not as vivid. I have done this because the overall theme of my website is quite minimal, so when colour has been used I have stayed away from the vibrant colours as I want to keep them quite neutral, however some images will appear more vibrant than others. For these images I have altered the hue and saturation slightly, I feel that they look quite nice as they don't look like a typical photo of an illustrated logo, I have cropped and chose specific sections of the image to use in my collection.
This shows the archive page, which will include a collection of my own images displaying different styles of bottle labels and unique illustrated logo. This is the first digital mock up showing how the images could be presented. Each image will be a rollover image, and when the mouse is placed on each it will reveal a small amount of body copy informing the viewer of what the image is and who designed it.
This page below is the showcasing page for existing designers work, I have selected two of my favourite designs. Stranger and Strangers work has always been some of my favourite, I think their illustrative logos for beverage labels are unique and show great use of illustrative image combined with type. Whichever image you choose to click on, it will then direct you to that artist/designers page.
This page shows the Stranger and Stranger design page, this can be found on both the sidebar navigation, and when choosing the design fro kraken rum on the showcase page. The page consists of some images for two projects completed by this design company and some information about the history of the company and their designs.
This page below does the same for the designer Christian Antolin, which showcases some of his projects. This page will follow the same structure as the previous page.
This shows the sidebar navigation on the right hand side, I have used square icons for the points, and just a simple sans serif typeface helvetica. I have already established that helvetica is not to be used any more for body copy, therefore this needs changing.
In the crit, I was advised to space out the menu bar, because as it stands it looks like bullet points. I will consider this when developing my final web pages, and I will definitely change the sidebar menu and the typeface of body copy as that was also mentioned in the crit.
Further feedback from the crit:
- let the logo be influenced by the purpose and target audience: once these are defined and made clearer, then it will be much easier to create the branding/logo for my website
- make sure I change the sidebar navigation
- image layout is quite nice as it is, but needs further development as it doesn't flow completely as a functional website yet
- change the typeface used for body copy, and work on the titles to develop them
- most importantly define the target audience in order for the website to make more sense
No comments:
Post a Comment