Design for Print and Web. Website. OUGD504.

 The website for my bakery brand needs to be fairly simple and let the brand shine through rather than being complicated and hard to use. 
The colour scheme should be the same as the whole brand, white, great, blue, pink and yellow. And the website should include what locations the bakery will be at, what cakes that it sells and about the bakery. 

The layout should be simple for every user to navigate around, which is why I have kept it very simple and to the point, so that the information is easy to find.

Each of the pages has a similar layout with the navigation bar at the top and the logo in the top left. The information is easy to find and the images and writing is kept to a minimum.

I thought about creating an app for the bakery that could give the user an alert when the bakery announces a new location, however I don't know how useful this would be and how many people would actually use it. Therefore I don't think that it is important to have a mobile app for the baker, as I think that people who would seek out the information would find it easy enough to find on the website.

Final Designs. Design for Print. OUGD504.

As part of my final design I wanted to try as many processes as possible to expand my knowledge of printing and also making my final piece more interesting and tactile for the reader. 
I decided to try embossing using a copper plate as this is something I have never tried before, and I also think that it would work well on the stock that I want to use for my front cover.
The process of making the copper plate is a long one, but I think that it will be worth the time and effort  to create a really interesting front cover for my folder.

The photo etching process uses photo sensitive film to impart an image on the copper plate, that is then etched away using a chemical process. This ends up creating a really deep etch that is perfect for embossing. 

Blind embossing (without ink) looks really good on the grey board that I amusing for my final cover. However, it is not very noticeable from far away and so I would like to try embossing using ink so that the title can be read from further away to give the front cover more impact. 

I am really happy with the results of the embossing using ink, although to use the fluorescent ink I had to screen print this first into the great board, and so I found it quite difficult to line up the embossing plate with the ink. 

For the other inside title pages I wanted to try some more processes, and so for the stock page I used laser cutting, as this way I can use different stocks behind for examples of different stocks. 

for the colour and format pages I used screen printing to create the title pages. The colour page I used multiple colours to demonstrate the title, and for the format page I used a metallic ink in bronze to go with the colour scheme of the whole publication. 

For the layouts of my pages I wanted to include something design wise that would create more interest in the page and break up the white space. This is where I decided to use lines in a different colour. 

Final Piece

Overall I am happy with my final piece. I love how the embossing on the front looks and the title pages and layouts of the pages all look really good. The only think that I would have done better is the lining up of all of the pages. I found this very difficult and with time restrictions it was impossible for me to do each page individually. However, I don't think that this takes away from the impact of my publication and think that it works really well for my concept and my audience. 

Design for Web. OUGD504. Coding my website.

Coding was something that I really struggled with in the web design sessions, and so I knew that coding my own website would be very hard. However, I made it a little easier for myself by making my layout design of each of the pages fairly similar, and so I could use what I coded in the sessions to help me adapt that to my own website. 

Beginning to code my website I really struggled getting the files correct, in the right place on my computer and setting up the html and css documents correctly. But, after about an hour of looking back over notes, reading through books and looking at tutorials online, I managed to get my first home page file set up correctly and linked to the css file. 

Starting with my home page, I began by using css styling to create and place my main components, the container to fit everything inside of, the logo and the navigation bar at the side. In the web design sessions we learnt that to place a container or logo in the centre of the page so that it stays in the centre all the time, even when re-sizing the internet browser, you have to use percentages within css. For the container to always be in the centre of the page it has to be positioned left by 50%, but also -512px (half the size of the screen) so that it always floats in the centre.

The navigation bar that holds all the buttons to the left of the container then had to be positioned so that it would always float to the same side of the container. 

For the navigation buttons I used rollover images that would change to show which button you would press. These would then link up to whichever page they corresponded to. To do this you have to use two images and set up a rollover image in html. 
When all of the pages are made these rollover images can be set up to link to each page when they are clicked on.

I found it quite difficult to place the buttons on the navigation bar so that they were below the logo on the screen. Using placing from the top in css didn't work as it would only move the whole bar down to the bottom of the screen, and so in the end I had to use line breaks in the navigation bar itself to move the buttons down. 

This worked really well to move all of the buttons down at once rather than having to do this individually.

The information and take the quiz button were placed using percentage just as the logo was as this was the easiest way for them to stay in the right place from the left and the easiest way for me to lay out each component of the page in the way that I wanted.

However, I am not completely happy with the final layout of this page as the take the quiz page isn't quite in the right place. I played around with this for quite some time and this is as close to how I wanted it to look as I could get with my limited knowledge of dreamweaver. 

From here it was easier for me to go on and do the rest of my main pages. Each of my layouts have a similar structure in that the logo and navigation bar are always the same. This was as much a design decision as a usability decision, as the navigation bing in the same place over the whole website makes it much easier for the user to find their way around the website. 

The about page is what I went on to do next, as this only has one other component on the page other than the logo and navigation bar. To create a new page I just created a new html and then linked this up with the same css style page that I created for my home page, this way it was much easier to link in the logo and navigation bar into each page rather than creating this same thing every time I create a new page. 

I first tried to create the body of text within dreamweaver, however I found this much too difficult to place the text in the correct position within the page and have the right format. therefore I found it was much more effective to create the text in illustrator first and then put this into css as a background image. This way I could place this exactly where I wanted it within the page. 

For my restaurant pages I wanted to create an initial page with all of the names of the restaurants on, that would then link to each individual page with information about each restaurant. For this initial website I decided to make pages for three restaurants as this would be enough to show how I want the website as a whole to work, but not make it too complicated for me to create with too many pages. 

The initial page is just the title and three rollover buttons that link to the individual restaurant pages. 

Each of the rollover buttons on the main restaurants page links into the individual restaurants page. This was really hard to create as there are a lot of components on these pages. I found that setting the page out as I wanted it to look was fairly difficult but I eventually understood how to use the percentage placement quite well and was able to make the pages look just how I wanted to look.

After creating these pages I realised that I hadn't created a maps page at all to show the user where to find these restaurants. I decided that it would be best to include this on the individual restaurants pages as this is where the user would decide whether they wanted to go to this restaurant or not. This is where the quiz would lead to and this is where the user will find out about the restaurant. A link for the maps page was then put on this page underneath the image of food so that the user can go straight to the maps and find out where the restaurant is located.

I was unsure how to add a working google maps app onto my page that also automatically showed each restaurants location, and so for the purpose of proposing where this would go I created a map with all three pointed out on the map and placed this onto a new page. 

By far the most challenging pages for me where the quiz question pages. These all needed to link into one another seamlessly and work chronologically to make sense. When the main quiz button on the navigation bar is clicked it takes the user to the first question of the quiz, the first question into the second, the second into the third and then the third question takes the user to the restaurants page that is most suited to the answers. For the purpose of coding this website it was impossible for me to create a quiz that is completely interactive to the answers given, as this would need many different pages. The website that I have coded simply shows you how it would work and proposes the idea of a quiz to find someones perfect restaurant. 

Each answer is a rollover button that links to the next page of questions, and the last answers are rollover buttons that send the user to whichever restaurant suits their answers the best. 

After finishing all of these, I had to make sure that all of the rollover buttons I used were linked up to the right pages and that all of these worked. While doing this I noticed that the navigation bar on the homepage was in a slightly different place than it was on the other pages, and I soon realised that this was because of some earlier tests I had done earlier and had forgotten to delete. 

As well as the line breaks I had used for the rest of the navigation to move the buttons down, there were still paragraph breaks that I had tried to use for the same purpose. But this was easy to rectify. 

Although I really struggled with this at the beginning of the process and had a lot of trouble starting out, I now feel fairly confident in creating a simple website design. And although some things didn't turn out exactly how I had planned them and designed them, I am still very happy with what I have achieved.