Final website designs

Final set of my web pages. Overall, I am not pleased with how they turned out as I dont feel that they are of a high enough standard  and also the content is too thin. I felt that I struggled with this brief therefore I dont think that my work is to the full potential that it could of been. I would love to develop this further and improve the designs, by continuing research allowing me to have stronger content.
The website is designed with the intent to have the whole site scroll down from one page to the next continuously if desired, or if they prefer they may click which page they want from the menu option which will directly take them to that page if chosen. I think the double strokes either side of the content area where a good decision to include, with my website having the continuos scroll feature, as they will be consistent throughout the whole website. The serif font definitely works with the developed pages, sometimes a serif font is less legible for a web page however my website is not very text heavy and the font is also a nice clear legible point size, resulting in no difficulty in reading my the information. 
The main idea for the showcase page is the user can click whichever illustration belonging to the designer they are interested in, and this will also directly link them to the page that the image belongs to. This allows the user to view some more of their work, and read some information about them. Then by clicking on one of the designs from their page, it will take them to the designers very own website, as the whole purpose of my website is to inform, and showcase other existing work that falls into the 'bespoke' category. The idea behind the 'create your own label page' is to give my website a more interactive element, the user will have a good knowledge of bespoke and unique bottle labels and may want to submit their own. 

Developing final web pages

These are a few screen shots of certain details on my web pages, before and after the development. I found that after I had created the logo, the overall style of the website needed to be changed. 

Changed the font from Lobster to Bodini for the headings of each page:

The homepage has changed a lot, I was originally intending to place the logo as shown in the centre then include a brief introduction underneath this. However once I had tried this out, I felt that by keeping the small introduction in the left column underneath the title suited the homepage best. It allows the main focus to be on the logo, without the viewer been put off automatically by a paragraph of text. The brief introduction is needed just to ensure the user knows exactly what to look for and expect on this website:

The menu bars for the right column have been changed drastically, this was some feedback that I took on board from the previous crit. The font has been changed from Helvetica to Bodoni also, with a smaller point size than the headings:

The content areas on each page have remained exactly the same, however I have just changed the font for the body copy, which suits the new style of the website much better: 

Another change I made was to swap one of the pages around. I removed the archive page (intended to be a page with a larger collection of images, the user could then select whichever and they would find out more information about that artist) and added the 'create your own label page' which offers a more interactive element for the users. I have created a simple submit form which will then redirect them to a following page once filled out their details, where they can upload a jpeg. of their own bottle label design:

Study task 9: Search Engine Optimisation

Task:

• Research search engine optimisation strategies and effectiveness. Make a list of potential SEO changes/adjustments to make your website.

What is search engine optimisation?
Search engine optimisation is a way of making alterations to a website according to the criteria that search engines use when crawling web content. It is a simple way of making sure a specific website can be found in search engines, for words and phrases relating to what the website is offering. The purpose of search engine optimisation is to create seamless and easy user experience, and also to communicate to the search engines your intentions so that they can recommend your website for relevant searches.

What search engines look for?
Content - the content is determined by the theme that is being given, titles, descriptions and text on the page.
Performance - how fast is your site and does it work properly?
Authority - does your site have good enough content to link to other or do  authoritative sites use your website as a reference?
User experience - How does the site look? Is it easy to navigate? 

Why does my website need SEO?
Search engines are the primary method of navigation for most internet users, and if search engines cant find your website then it will be difficult to find. Search engines are unique in the way that they provide targeted traffic, people looking for what you offer. Search engines are the roadways that make this happen. 

Search engines are unique in that they provided targeted traffic - people looking for what you offer. Search engines are the roadways that makes this happen.



**** List of potential SEO changes/adjustments to my website****

Developing logo ideas

After the crit, it was clear that I needed to introduce a logo to my website, therefore I needed to research into logos, and what sort of style would suit my website. The overall purpose of my website is to showcase, and inform the user about the unique niche of bespoke bottle labels. Some are slightly more commercial, whereas others are more custom made maybe for a specific beverage, or brand. 

This website for craft brews is simple, but it suggests the old fashioned and bespoke theme I am aiming for:

I looked at these logo designs in particular as I am interested in keeping my logo compact therefore a circular shape may be suitable. For my logo I want to create a hand rendered feel therefore it will be suitable to draw my own type, and draw my own logo then edit using illustrator. These designs suggest a more old fashioned approach, which will be suited to my website as I am going for the custom/tailor made approach. This style of design is more suited to my website rather than something more modern such as:

I found that these particular logos are far too modern for the type of style I am aiming for. The designs themselves are nice, and represent each of their brands well, however I would prefer to choose a slightly more old fashioned route, I can picture my logo including a silhouette either male or female, dressed smartly. Even though some of the designers work showcased on my website and some of the gallery images may be quite modern themselves the label designs are still custom made, therefor my logo needs to be more suited to a custom made theme, which supports my idea to use a more hand rendered approach. 

To start my logo, I began by sketching out some block lettering, then I came across a font similar to my desired effect called 'sketch block.' For my type I copied the letters, but made each letterform slightly lighter, and also made each letterform look more hand rendered. I scanned this in so I could digitally manipulate. 

This is the original scan in of my hand drawn letters, they have come out quite nicely, however I feel that they need to be more refined digitally so that they are more prominent especially if this was to go for print:

This is the same lettering however the colours have been altered slightly, I will definitely need to consider colours but I think that the individual letterforms need to have an increase in weight, or I could live trace them on illustrator to turn the title in to a vectorised image:

This is what I have done here, taken the scanned in image and live traced the letters on illustrator. Out of the three this is the most successful, as the letterforms are a lot bolder and will have the ability to stand out from the logo itself, but colour definitely needs to be applied even if it is only a subtle colour change, but this will be done once placed with the logo so I can pick certain colours from that logo:

My research consists of old fashioned logo designs with traditional male figures, this has informed my decision to create a similar logo to the ones I have researched, but with a more hand rendered style. I started by roughly sketching off the top of my head, then started to refine the drawing:

Initial sketch:

Developing the sketch: I am happy with this rough outline, it just needs refining slightly. For the colour I want to use watercolour as I can do the colours as strong or as subtle as I like, I will most probably keep the colours quite neutral with some darker tones of greys and dark purples:

This is my refined version, using watercolour and then fine liner to accentuate certain areas, I have also done a slight wash of colour in the background, which can be included in the final logo. I want to create this but use a circular shape, keeping the colour wash background. 

Here I have created an ellipse tool using a colour from my own design and lowered the opacity. I have centralised the figure so there is room for my type to fit within this ellipse. The colours have also been edited slightly to give the logo more definition. Keeping the watercolour background was a good choice, because if I had opted to remove the background wash and just uses block colour for the ellipse then it would of appeared too harsh against the soft strokes within my illustration, I intended for the fine liner to be the most defining part of the logo, therefore keeping the background softer allows the the illustration to be more prominent. 

For the name, I need to decide how to alter my letterforms. This shows how the letterform will look against the background if I was to leave them as they are after live tracing on illustrator. For my logo, I feel that they need to have a more hand rendered feel to them, otherwise the letters will almost clash when placed alongside the design. I want to add a subtle hint of colour within the letterforms, but so that you are still able to see the sketchy qualities within each letter. 

Before adding colour to 'bespoke bottles':

Brush tool used to apply an existing colour chosen from the design:

Final Logo

This is the final logo that I will use, including the newly coloured type. I am pleased with the overall design as I feel that I have definitely achieved what I set out to do in creating a hand rendered style. I have added a thicker stroke than the design shown above, allowing me to advertise the websites name at the very bottom in a smaller point size using a different font. Now that I have my logo finished it is crucial that I revisit my web pages to not only finish them, but I must tie them in more so they work along side each other, this will mean altering the colour pallet and also choices of fonts.

Developing my website

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 

Initial ideas and scamps

Now I have gathered my research, and researched into basic web design, scamps, and canons I now need to start my initial sketches to then develop into more detailed scamps. At this point I am still not one hundred percent certain of the exact content which will go on each web page, therefore these initial thumbnails and scamps are a basic idea of how the content could be presented on the page, taking into consideration images and body copy.

The images below show my initial thumbnails. After researching existing websites, I have decided that mine will not be over cluttered as I feel the more effective websites have less going on, which makes it visually pleasing. 

From the thumbnails, I have started to draw out some more detailed scamps illustrating possible layout solutions. 

This layout shows a simple design, I have used the De Graaf canon we learned in the studio session to create the content area. On this, the content will be centralised all the way down the web page, with negative space either side of the images and body copy. The heading for the specific page will be placed in the left blank section at the top therefore it is prominent on the page and is not mixed in with the content. 

This scamp below is similar however I have not used a De Graaf canon on the page, and the content is aligned to the right leaving negative space on the left hand side but not the right. I definitely want to include negative space on my web pages as it is a fundamental parameter in web design. The web designs have to be tailored so that the end user has the easiest experience reading the content. If a design is too cluttered then it becomes hard to tackle, and the design does not provide a clean, readable experience. The negative space declutters the design of a page and helps draw the users focus to the content on the page.

This design below also has a similar design, using the negative space as part of the page design enables the viewer to focus on the content which is clearly centralised. I have included the navigation bar in the top left corner of the page, and the heading of the page in the centre at the top before the content is listed. 

This scamp uses the De Graaf canon for the container again. I feel like this layout is too cluttered to be developed into a web page, after research into existing web pages and how they are designed, I want to keep the layout of mine rather simple yet consistent throughout each page. Not necessarily exactly the same design on each web page, but I want the website to flow therefore consistency will be an important factor to consider.