When the user click on image on the homepage, it will direct them to the page that the screenshot shows above. When clicked on any of the images, a larger image will appear in a gallery. The function of this gallery will enable to user to go back and forth on the images.
The screenshot above shows the final layout for the homepage. As this was the main page, I had to make it appealing and visually strong and it is this page that will entice the audience. On this make I created a rollover image where the cover changed to a different colour. Another one was a click image that when the audience clicks on the image, it will direct them to another page and to be specific, this link will direct the user to a photo gallery of the products. There was also information in the form of images, that directs a message to the user, informing that there will be a prize draw; by doing this it interacts with them by getting them involved with the brand and product.
The screenshot below shows the layout format for all the products. It presents the cost of the items. When clicked on an image, it will take you onto another page where you can see the item in more details. Also the arrow isn’t just a typical standard arrow. It designed to reflect upon the brand.
Inside page layout for products
The screenshot below show the about page. On this page, it presents the information in a circle so it draws away the attention of the other pages being similar; it breaks down all the elements. To making the text not looked cramped and readable to the audience, i adjusted the kerning. Certain information is highlighted in a different colour as theses information will be able to some up about the brand instantly.
The screenshot above shows that I created the index page for my website using Dreamweaver. I placed in the background and brought in the other elements and positioned them in the required position. To make the opening page interesting, I added a behaviour upon the logo. By doing this it enable the image to fade in; like the mage was loading up the page.
To not draw away the attention of the logo, the text is in small stating “to click onto the logo to enter”. The background of the page, is that same background that is used on the guideline book; this keeps a link between everything that is related to the brand.
To help me come up with the layout and sizing of the elemenet within the wesbite, i brought and created the format of the designs in photoshop. The screenshots below shows this.
By inserting the image into the positioning of the designs, it enabled me to work out the correct size and dimension of the separate elements for when I insert everything into. I liked the overall layout of the design. I wasn’t to fussed about the use of type, as I am going to be able to experiment when start creting the contents within Dreamweaver.
The screenshot above show the contents within the contact page. To help me create this page, I used a site called http://www.emailmeform.com in which it help me select information I wanted on the page and generate the code in which I was able to paste into my site. When, the code was placed into the contact page, I just the adjust the rows and columns spacing to fit my requirements. By having a cryptic code, enable that scammers or junk mail doesn’t come through and also makes the site look more legit and professional.
I used a program called “Adobe InDesign” to create the the guideline booklet. The screenshot below shows the the contents within the programe.
The following images below show the final pages for the guideline.
Part of my project deliverables was to create a branding guideline. By creating this it helps users refer to the brand whilst handlying it usuage as it helps focus the user to define its style and keeping ir a cohesive design.
The branding guidelines is going to be broken down in the following category concept.
In the previous posts, I have come up with the contents for the specific categories as mention above. The titles that are bold will be the main chapters.
Below are the sketches of the branding guidelines template format that I will produce book.
The first spread that I am going to be working on is “I hate that there is always creative criticism but love that there is always a light shinning upon improvement.“. The idea concept for this was a person piling on top of each other in different positions trying to get to the top even when something knocks them down. At the top, there will be a bulb shining. The background scene will be gloomy to emphasis the criticism. The initial sketch shows the idea that is going to be portrayed.
I was quite pleased with the initial sketch, so I started creating the idea within Photoshop. At present, the idea doesn’t conceptually and visually look strong but until I use colour, toning, lighting etc, it will visually look appealing.
After finalizing the image in Photoshop, I showed my fellow colleagues within the group and asked for there feedback for improvements. I liked the overall outcome as it reflected exactly how I wanted to portray the quote. The image below shows the outcome.
The feedback that I got from everyone, is that they all liked it visually and conceptually but there was a few recommended improvements. Theses improvements consisted of:
Having taken in board their comments, I went back and re-edited theses required elements to improve the overall outcome of my work. Overall, I was happy with my first spread as photomanipulation was a technique that I learnt and enjoyed during my time at university.
The image below shows the final outcome.
Stefan Barretto 