OUGD601 // Dissertation // Practical // Website

From the digital mock up I created, I could use this to code and create the actual website. Having the fils there to look at for the design aspect and layout of the website, made the coding of the website so much easier to do.

Home page

The home page main content is a slideshow which presents images of my own work. This home page acts as the anchor page which all the links on the left hand side will go from. 

The slideshow on the homepage is automatic and runs through itself on its own, the images within the slideshow are random, so that when the user is looking at my website it is more varied and doesnt show images of the same project one after each other. 

Projects Pages

The project page is accessed from the home page, when clicking on the projects link, it reveals the project titles, which when you click on will open each project page as shown below. 

Each project page is set up the same way, the main content area has a slideshow of images for the project with a brief description of the project below it. The slideshow can be scrolled through manually or left to automatically scroll through the images. These pages take full advantage of the content area for the images and show them at a large scale so it is easy to see the products created for each project. 

Iconic Cities 

Life with Energy

Imprint

90 Years of BBC Radio

This is Fedrigoni

About Page

The about page is all about myself and my own practice. This page shows the four column grid put into practice as each section is in its own column. The first column is about me and talks generally about myself and how I came about graphic design and the stage I am at now within graphic design as a career. The Design Practice column talks about my own practice and informs the reader on the type of design work I do. The third column is about experience and awards I have done and received throughout the time of me working within graphic design. 

Contact Page

The contact page again uses the four column grid this page shows my contact details which includes address, phone number and email address. Along with these details there are links to various pages which my work is shown on and other social media websites available. The third column displays the copyright for the website and my work. 

These four pages make up the design of my website. These simple designed pages showcase my work and myself in the best possible way and create a easy to navigate around website making it easy for the user to get around and see my work. 

OUGD601 // Dissertation // Practical // Digital Mock Up

After drawing out some initial designs for each of the pages of the website, I have created a digital mock up for each of the pages. This gives a better representation of how the website will look.

As you can see from these designs, the website works across a four column grid, on the home and project pages, this is taken full advantage of by using the slideshow to fill the content area, on the about and contact pages the four columns are clear to see and all hold information relevant to that page. 

By using the four column grid, it creates a simple website, but one that is easy to navigate around and also read and see all the content clearly. It also makes it easier for me to translate this across to the print format of the publication that will make up the practical element. 

OUGD601 // Dissertation // Practical // Idea & Product

After working on my dissertation, my attention has turned to the practical element of the brief. This side of the dissertation has taken me alot longer to think of an idea, as i want to create a product that investigates the question and subject area of my dissertation as well as the written element of it does, I didnt want to just reproduce my dissertation in a graphic design style.

After much thought and development of the idea I have my final idea which I am pretty happy with and looking forward to start. The practical element is going to be a publication. The publication is going to put into practice the idea of a bespoke design and production as within the written element this evidences that this is the way printed publishing will turn.

The content of the publication will be a website. The subject area is if print is relevant in the digital age, so comparing print and digital design is the essence of this. We see designers and writers talking about making print into digital, but the idea of turning digital into print is never looked at. So I will code and produce a website, which I will then take the code of this and lay it out into a printed document. The layout of each page within the publication will replicate the pages of the website, but the coding for this page will be laid out as it would appear on the website itself.

For the website, I am going to produce one which is for myself, this will include information on me as a designer, a online portfolio of my work and contact details. These pages will make up the content of the publication, which once done, I could hand to someone to code and it would produce my website.

Elements within the publication such as typeface will take representation of a digital nature and how the coding of a website aesthetically looks. This will carry through the page numbering etc. The format of the publication is going to be A2. I have choose to use a large format as the tactility of a publication is the essence of it, making it large format, physically means the user is interacting with it. The publication will also be screen printed as this is essential to portray the idea of print vs digital. The stock of the publication will be GFSmith stock, the stock colours are that of my branding, orange, grey and off white, these will be used is various weights to represent the importance of pages of the websites.

I think this idea portrays the idea of my dissertation and explores the subject area in a interesting way. Producing the publication is going to be interesting and fun as it involves me working across print and digital, but brings them both together to produce the final product.