OUGD 504 Module Evaluation

 Throughout the design production module I have gained and furthered my skills in many area's including indesign, dreamweaver and photoshop.  The indesign software inductions with Mike were very helpful and came in extremely handy when creating my print and colour manuals, if they had been designed on illustrator then they would have taken me a lot longer.  Also the photoshop inductions have helped further my ability in the software that I’m not too confident in using.  While doing the research for the design for print module I feel that I learned a great amount, however didn’t get to do as much designing as I would have liked.  I found the Print Manual quite a hard design brief as we had to handle and process a lot of information as I’m more of an image maker than a communicator.  I am pleased with my outcomes from the brief however I now feel if I had more time then I could develop it further.  I enjoyed ordering paper samples from stockists like fedrigoni and moo.com.  Due to this brief I experimented a little with foiling and I love the effect so I will definitely carry this technique forward and use it in design briefs when necessary.
 Throughout the design for Web brief I feel that I have learned so much, having never touched dreamweaver before.  The design for web brief was definitely the one I struggled with the most however I now have a fully working four page website with rollover buttons that change colour which is something I never dreamed of doing.  I feel that I have learned so much from this brief however there is definitely room to learn more when it comes to dreamweaver.  I now feel confident that I could build my own website from scratch and it is something I am beginning to consider.  I think it’s a great idea to have our own personal websites to show to prospective employers or to studio’s we’d like to do a placement at and just to get our names out there and start networking more.  Power through the internet!  It’s easier than carrying a portfolio around too, and is always (nearly always) accessible and better than showing our blogs with all the development work and such.
 I am fairly pleased with the outcome of my ISTD brief - on yer bike!  At the beginning of the design for print & web brief I rushed into choosing the on yer bike brief and wasn’t very happy with it in the beginning but I just decided that I would design something that I knew I would enjoy designing.  I am happy with the map I created with all the icons and much preferred this brief to the others as I did more illustration work than in previous briefs, even though the map became a tad tedious after a while.  Having now finished and submitted all the work I feel that I could do more for this brief and apply my design work to more products.  I am also happy with the application part of this brief and think that it would work really well in real life.  
 I am now really looking forward to cracking on with the responsive module as there are briefs available that I am so much more interested in.  In the future I intend to start briefs earlier so it gives me time to try out different processes, I really want to get back in the print rooms and experiment with screen print, etching and lino cut and find out what other techniques and processes they offer.  I am also going to sign up for a fabric dying workshop, I really want to try and steer away from digitally produced designing for a while as I think this will be more suited to my practice and interests and also improve my work.  The studio is a much better place to work than my bedroom so I am definitely going to utilise it more from now on.

Design for Web // Coding

To begin with I created a template to create all my pages from.  I decided that all pages would have the same buttons at the top and there would be a title and then a 2 column structure.  I created the rollover images in the template and created editable regions for:

• the title as I wanted the title to be in a typeface that wasn't available in dreamweaver so I created them as image files using illustrator.
• the name of the page
• the two columns

This is the coding for my style sheet, created from the wire frame:

@charset "UTF-8";

/* CSS Document */

body {

font-family:Georgia, "Times New Roman", Times, serif;

font-size:0.8em;

color:#000;

}

#h1 {

font:Verdana, Geneva, sans-serif;

font-size:30px;

}

#container {

width: 1024px;

height: 768px;

background-color: #fff;

position:absolute;

margin-left:50%;

left:-512px;

}

#title {

margin:50px;

width:1024px;

height:305px;

background-color:#000;

}

#navigation {

width:1024px;

height:156px;

position:relative;

margin-left:50%;

left:-512px;

padding-left:62px;

}

.button {

width:150px;

margin-right:100px;

height:156px;

position:relative;

float:left;

}

#pagetitle {

width:1024px;

height:50px;

margin-top:60px;

text-align:center;

float:left;

margin-bottom:40px;

}

#pagetitle p{

font-size:3em;

}

#column1 {

width:512px;

height:563px;

background-color:#FFF;

float:left;

overflow-y:scroll;

}

#column1 p {

margin-left:0px;

margin-right:20px;

float:left;

font:Verdana, Geneva, sans-serif;

font-size:1.1em;

text-align:justify;

}

#column2 {

width:512px;

height:563px;

background-color:#FFF;

float:left;

}

#column2 p {

margin-left:50px;

margin-right:0px;

float:left;

font:Verdana, Geneva, sans-serif;

font-size:1.1em;

text-align:justify;

}

Web Design // Final Design Boards

Here are my final design boards uploaded to issuu.

Open publication - Free publishing - More circus

ISTD On Yer Bike // Final Design Boards

Here are my final design boards uploaded to issuu, I also plan to print these.

Open publication - Free publishing - More bike

Design for Web // Design Boards

Here are my initial idea's.  I wanted to create a website that was a bit different from an average website with column structures.  However I was advised not to create any of these pages as I had designed a landing page without really realising.  I still would like to create a page like this as it's more interesting but I found it difficult enough creating a simple structure.



So I then simplified my idea to have the buttons at the top of the page and for the information to appear in two columns like you can see in my Wire frame below.  My main influence to my website was the 'Oh Comely Magazine' site.  It is simple and fresh and is really easy to navigate.

Oh Comely Magazine Website:

The digital mockup below was very helpful for me when creating my website to refer back to for measurements.

Creating the images for my website took me longer than it should have.  Creating rollover images meant that they had to be placed in exactly the same place on the canvas/art board.  I drew the images first, then digitalised them in illustrator and then took them into photoshop to resize them correctly and 'save for web' use.  The photographic images I used are images sourced from pinterest at the beginning of the 'history of' brief.  I drew up some frames to put round the image so they fitted the style of the overall website better.  I was initally going to use lightbox to display my images however I thought that this suited the website better and that I didn't really need more than one image per page.

This is how my final website appears.  You can see when you hover over a button that it fills with its rollover image.

Feel Good // Keyring Design

Below are my designs for the keyrings, ready to take to the laser cutter.  The designs will be cut out of colourful felt, reflecting the fruity feel.  I think the designs make quite an interesting pattern and might try and develop this further and apply it to something else.

Web Design // Shop Page

When creating my shop page to help me think what information I needed to provide, I looked on ASOS.com, a massive online clothes retail company.

Web Design // Development

Preparing my images for web.  I was originally going to use light box to display a gallery of photographs but decided I only wanted a few images over the whole website.  To fit in with the overall design of the page I have drawn up some frames and scanned them in to create frames around the image.

I've then pasted the vector versions of the frames as smart objects in photoshop.  I have created documents the size of the column width and resized the images so they are suitable and saved the files for web on medium quality.

This is how the images look when placed on the website (previewed in safari)

Below you can see on the style sheet and the coding for the image and text shown above.

My Website so far, you can see what the rollover buttons appear like when hovered over:

Below is the stage make up page:

Web Design // Development

Below you can see my website with working rollover images and a title.  From here I need to create a template for each page and then add my content.  I am not happy with the buttons at the top as I have not sized them correctly, I need to go back into photoshop and edit the sizes.

Below you can see how I have corrected the spacing between rollover buttons:

ISTD // Final Crit Presentation Design Boards

I began the project by looking at other artists work and decided I really like the aesthetics and illustrative style of the image on the right.  I also looked at way finding signs and symbols and recognised that most are just pictograms and that this was something I was interested in creating.

I took a trip to Cycle Point in Leeds, opposite the train station.  As Leeds is my chosen city for designing a cycle system around this really helped feed into the contextual side of my project - the information booklet.  

Here are some pre existing maps of Leeds which I think are really busy and need to be simplified.

The original colour scheme received bad feedback int the crit as it's a bit offensive on the eyes.

After experimenting further with colour, I chose the blue tones as they are quite calming and cool colours.

The application is a tool for tourists to find places of interest, information about the places and where to find them on the map.

The information booklet (a3 hotdog fold) encourages people to cycle, includes information about the environment and reducing your carbon footprint and tells you where you can hire bikes from in Leeds.

Below are my final designs, printed - not very well unfortunately but I ran out of time and have little funds.  You can get an overall idea of what the designs look like in real life.  The map has received good feedback from peers so I might print it larger.

ISTD // Map & Information Booklet

Below is a final screen shot of the map I have designed for 'On yer Bike.'  I have pinpointed area's of interest for tourists on the map.  On the actual map I have made the icons black to simplify them and make it look less busy as, as I was designing the map I came to realise that a lot of tourist attractions in Leeds are very close to each other.  I am looking forward to getting some feedback at the final crit as I have been looking at this for so long now that it will be nice to get a fresh response.  

I enjoyed designing the icons as I love illustration however I found creating a map extremely tedious as I am not very good at handling a lot of information but at least I now have a bit of experience incase I ever have to design a map again.  The original icons had a script typeface called 'lavanderia' which proved difficult to read in the previous critique so I have chosen 'Claire Hand' instead as it is sans serif and simple enough to read, it's also quite youthful looking which I thought fit the style of my design and the nature of the project.

Here is a screen shot of the information part of the booklet:

This booklet will be printed on A3 so it will be legible and it is a hot-dog fold, that's why it is laid out like this.  Information included in the booklet:

I hope that by informing people of safe places to store and hire bikes from and providing them with routes around the city then it will encourage them to cycle more.

ISTD // Info booklet development

I want to include this photograph of Leeds Cycle Point so people can recognize it easier, as it will be the first point of call for many arriving in Leeds if they wish to hire a bicycle as it's opposite the train station.  As I haven't included any photo's so far, I don't want this one to look out of place therefore I think I will edit it in photoshop so it fits the overall style more.

I decided to edit the colour ways through using the duo tone option.

The final photo:

Feel Good Drinks Development // Felty Fruity Keyrings

For the Feel Good Drinks brief I thought it would be a nice/good idea to give away free fruity key rings.  Initially I was going to make the key rings out of heavy duty card but I decided that they would be too flimsy and then the key ring would become more of a throwaway gift.  I have chosen to experiment with felt as it will hold its own better than card.  This could almost make the key rings a collectable item but either way I think it will help entice people into buying a Feel Good Drink as lots of people haven't heard of or seen them before.  This will make them more eye catching.  I'd also like to experiment with the laser cutter to make wooden key rings as well. 

Feel Good Drinks Development

Starting to place the information on the illustrated labels.  I received feedback from some peers in the crit that they think the gradient makes it look cheap so I have tried using a block colour and think it works okay, still needs some development.

 

The labels below I think are coming on well, they still need to be placed onto the actual label shape that is included in the feel good competition pack. I would prefer to have the information under neath the logo however for the cranberry and lime drink it won't work because of the placement of the cranberries you wouldn't be able to read the read writing and I'm trying to use a limited amount of colours in each label.