Live Project

Alias Website Development

Thu, 24 May 2012 06:39:00 -0400

My original mockups:

Splashpage

Home Page

About Page

Collections Page

This project didn’t change that much from the orginal mock-ups throughout the whole project. The most significant changes are:

Body Text:

I usually avoid using the Cufon text-replacement system for body text but since it’s a fashion site and relies on looking cool and sleek I used it to change my body text from ‘Helvetica Neue’ to ‘Futura’, which worked a lot better with the logo and the style of the site.

Patterned background:

I made a repeating pattern out of the Alias logo, which I used for the background of the pages to give it a more dynamic feel.

Images on every page:

In an attempt to reduce line length I added a sidebar but didn’t have anything to put in it, so I decided to take advantage of the high-res photoshoot images with white-out backgrounds to add something visual to each page.

Streamlined footer:

The final site can be seem here: www.iamalias.co.uk…

Lippy Masthead Development

Wed, 23 May 2012 22:04:00 -0400

Lisa Shurmann, the art director Lippy, asked me to redesign the Lippy masthead to create a bolder and more professional looking identity for the magazine. I was asked to use their current fonts, Coolvetica and Blue Highway, however, since what she wanted me to do was ‘blow up’ the font to make it bolder I suggested finding an alternative font with a bold version instead.

I started by trialling a number of different fonts with a couple of different concepts to give it a more focused identity:

My initial designs, admittedly, didn’t fit the brief at all since they weren’t any bolder than the original, nor did they match the original idea they had specified so I tried again, keeping to the original brief.

There were mixed feelings about this design with the majority of the team liking it but the art director didn’t like. Although the client never explained why she didn’t like it, it was pointed out to me during a crit that the simple interpretation of the name Lippy was essentially a trivialisation of the feminist ideals by using a stereotypical symbol of femininity.

I eventually found a font the client was happy with and started to put together a few variations on the original idea using the new, bolder font:

The third variation was chosen as the favourite, so I began to develop the idea further, tweaking the kerning to create a more balanced composition.

Some tips I found online suggested turning the word upside down so the shapes of the letter don’t distract you from matching the space between each letter. Another explanation of correct kerning said to imagine a balloon of the same size between each letter which is squashed to fill out the whole area between the letters:

I used an equal number of squares arranged to fit between each letter to get the spacing right, although the process was slow and time consuming:

The final masthead, properly kerned, was never actually used despite the client saying they liked it and it would be used but here it is, if only as the result of a learning curve:

Designing Invoices

Wed, 23 May 2012 20:57:19 -0400

I have been asked to design an invoice (something I know nothing about) so I need to look at some examples to give me an idea of what needs to be on there.

My first step was to google invoice layouts, the results of which informed my list of necessary information for design invoices:

Your company name and details
Client’s name and details
Date
Project name
Invoice number/reference
Description of services provided
Hours spent
Hourly rate
Sub totals
VAT costs
Total
Due date

I also found a great article on Smashing Magazine’s website about designing invoices, which really helped me design my client’s invoice (below).

Final invoice design:

VK Photography & Design Logo Development

Wed, 23 May 2012 14:45:40 -0400

I started out designing the branding for VK Photography & Design by sketching out some ideas playing around with the relationship between the letters ‘V & K’.

From here I mocked up a few of the ideas I felt had some merit to them:

The response from Vicky was that she liked ideas in some of them but none were quite right.

I went back to the drawing board and developed an idea I really liked, below, but the feeling was that it was too strong/bold and looked a bit too much like DHL-type company.

She also provided me with some examples, which really helped me envision what she was looking for:

I began looking for a slightly decorative font I could use as a starting point as this seemed to be the recurring theme in the examples given.

I eventually, after a very long search, came across ‘Diavlo’, which was a the perfect balance between decorative and functional. The ‘V’ specifically appealed to me.

From here I began experimenting with the VK again and merged the two letters together, which worked nicely paired with gotham medium for the ‘Photography & Design’ tagline.

I got the go ahead from vicky on the third variation but I thought the tagline would become illegible as soon as it was presented at a small size so I revised the idea using the ‘Overly Analysed’ logo (above) for inspiration in laying out the text.

Vicky also wanted to incorporate a colour, specifically ruling out any pink. I decided to go with purple after trialling a number of other colours.

The resulting combination was the final stage in the development and received the final sign off, with the additional bonus of an icon to use as a secondary logo:

NSGardens Stationery Development

Wed, 23 May 2012 12:48:03 -0400

Original Letterhead design:

The original design didn’t take into consideration the need for the recipient’s address to show through the window of the envelopes they would be sent in so I spent some time researching windowed envelope dimensions online and using old mail and redesigned a simpler letterhead that accommodated for the address.

Outline of envelope window area for measurement:

Final letterhead testing in envelope:

Adapting designs for Vistaprint

Neil wanted to use vistaprint.com to print his stationery so I had to adapt my original business card designs from the 85x55mm standard size to fit vistaprint’s artwork specs. This meant reducing the point size of the text slightly and giving a wider inside/outside margin but overall wasn’t as painful as I expected.

Final stationery printed by Vistaprint:

NSGardens Website Development

Wed, 23 May 2012 12:00:00 -0400

Click here for the final site (still awaiting pictures from client but otherwise finished)

The website for NSGardens has gone through a number of changes, both big and small. I will be documenting the most important changes that have led to the final design.

The original wireframe for the site, created in illustrator:

The idea was to have three boxes that appear on every page with a summary of each service category (Maintenance, Construction and Consultancy) and a link to the full service page, however, Neil felt it would be too busy if they appeared on every page so I limited it to the about page and main service page (show below).

I created the symbols in illustrator using live trace on photos to give the site a less text-heavy appearance.

As I got more confident in my coding abilities I redesigned the header to cover the full width of the browser and recruited the help of a friend and loads of support forums to create the horizontal submenu. This was one of the longest parts of the site to build - I couldn’t for the life of me work out how to do it but finally, through lots of trial and error, stumbled upon the solution.

Black and White to Colour image rollovers

Another new technique I taught myself was to create rollover image links to go from black and white - the colours of the partner logos at the bottom of the page didn’t tie in with the rest of the site.

Countdown Timer

Neil was keen to have a countdown timer on the site that counts down to each season as a bit of a gimmick, but to help inform his customers. The timer he wanted to use was very garish and didn’t fit the style of the site so, after a long search, I found some code for a timer I could style to fit the rest of the footer.

Original countdown timer:

Redesigned countdown timer:

Copy Editing

Most of the copy provided by the client needed copy-editing to bring it up to a professional level. For the basic typos and formatting and grammatical errors I did this myself, however, I felt the about page copy (the first page a visitor sees) needed someone more skilled to take a look so I employed the help of my girlfriend, an English and Creative writing student, to re-write the copy in a professional way with an appropriate tone for it’s application.

Final Site Structure:

- About

- Services

— Maintenance

—- Seasonal Tidy Ups

—- Lawn Care

—- Pruning & Topiary

—- Kitchen Garden & Allotment Management

—- Planting Schemes and Herbaceous Borders

—- Weed Control

—- Pest & Disease Management

—- Pool Maintenance

—- Commercial Landscaping

— Construction

—- Fencing

—- Turfing

—- Raised Flower & Veg Beds

—- Rain Water Harvesting

—- Irrigation Systems

—- Landscape Projects

— Consultancy

—- Garden Visit

—- Plant Identification

—- Garden & Plant Mapping

- Gallery

- Contact

Final Site (Home/About page):

Designing a brief form for clients

Sun, 25 Mar 2012 11:43:38 -0400

Sources:

http://graphicdesignboss.com/productivity/how-to-write-an-effective-design-brief/

http://www.palmiero-design.co.uk/ (downloadable brief guide)

Working with Lippy

Sun, 04 Mar 2012 22:19:00 -0500

I couldn’t make the meeting with Lippy on Friday but during the past week I have been working on a number of masthead, logo and cover ideas for them based on the specifications they gave me, and have been sharing my ideas with them via the Lippy facebook group (below).

Vis Commers that could attend passed on the following:

My front cover layout and masthead logo had been approved with only a couple of small adjustments
Sharing things on facebook isn’t working because too many people weigh in on decisions that aren’t theirs to make

Negative aspects:

Just after receiving the feedback that my cover layout had been approved I got an email saying they didn’t like the masthead and wanted to go back to their original choice of font (but wanted me to “blow it up” so it was bolder - despite my protests that this would be incredibly hard to do and not look good

My initial ideas using their chosen fonts:

Rejected because of the font choice despite using their chosen fonts
Didn’t like the lipstick icon (no reason, apparently - just didn’t like it)

I also tried a couple of options with a different free font but thought it looked too much like an attempt at a fashion magazine masthead.

They also didn’t like the ‘cheeky tongue out’ concept, which I can understand - I was just clutching at straws for concepts.

Colour Correcting Photos

Mon, 27 Feb 2012 16:50:00 -0500

While doing research on designing for Magazines I came across this very detailed and interesting article which goes through the process of colour correcting photographs.

I haven’t read it all properly but even with a quick skim it was clear it would be useful when compiling the layout for Lippy Magazine.

Free Font Search

Fri, 24 Feb 2012 10:19:00 -0500

The following sources proved really useful in my search for high quality free fonts:

Smashing Magazine

Smashing Magazine 2

Design Freebies - Body Fonts

Spoon Graphics

Lippy Magazine Meeting 1

Fri, 24 Feb 2012 10:11:00 -0500

I had my first meeting with Lippy Mag’s team today, which was a little underwhelming as I had visions of working alongside a professional team of Editors and Designers but the meeting was disorganised and there didn’t seem to be anyone else on the design team with any basic knowledge of design. That being said, they have content and an audience to design for so although it isn’t as I had imagined I think it will still be a good learning experience in working with clients and the challenge should help me develop my own skills.

I was also interested by their insistence on using free fonts rather than proper typefaces because of issues with licensing laws, which is something i’ve never really considered…

I went to speak with the IT department for advice on licensing laws and they confirmed that legally you have to pay for a license to use official fonts, however, with such a small publication it’s unlikely to be an issue. I will stick to using free fonts as this is what my client has specified and it will add to the challenge trying to find good quality fonts for free.

Live Project Proposal

Fri, 24 Feb 2012 09:49:00 -0500

Client Briefs:

Graphic Design project / placement with Lippy Magazine

Brief: Helping to design and layout magazine pages and front cover for Issue 2 of Lippy with a team of designers, photographers, illustrators and editors.

Rationale: I want to gain further experience in designing for publication on a practical, skills-based level (layout and typography) as well as getting an insight into working in a professional team (time management & collaboration).

Deadline: Deadline not yet discussed. Meeting to be held this Friday (24th Feb) to discuss the schedule I’ll be working to but I imagine this will require a large portion of my time from now until the deadline.

Next: The meeting on Friday will be a discussion of typefaces for the magazine so I plan to research into appropriate uses of font for publications and look at magazines aimed at a similar demographic for inspiration.

Website design/programming for Fashion’s End of Year Show

Brief: Working with Fashion students to put together a website for their End of Year Show.

Rationale: I want to develop my existing knowledge of web design/programming and I think this will allow me to explore and learn about an area of Web Design I haven’t had a chance to explore (a visual, rather than text, based website) with previous projects while gaining further experience in dealing with clients and building up my portfolio.

Deadline: Deadline not discussed (still in negotiations with the client). I imagine this will start slightly later in the year as the show gets closer but I imagine it will take up a larger portion of the project than the others.

Next: The next step for this project is to get a full brief from the client and discuss the project further so I know what they need and can learn any necessary skills for the project. I also plan to research similar websites for inspiration so I know the standard I need to work to and so I can make suggestions to the client if needed.

Website design/programming and Branding for NSGardens

Brief: Designing a logo, business cards and website for a recently founded landscape gardening company, NSGardens. I will also be teaching the client how to use CMS software to update the website himself once I am finished.

Rationale: I want to develop my existing knowledge of graphic & web design/programming with a project that allows me to develop a visual identity from scratch and requires new skills (PHP/Java/Flash programming), which will be useful for later client websites.

Deadline: There is no strict deadline for this project, however, I will be aiming to get the site finished in the next month to allow time for other projects.

Next: Developing rough concepts for the logo and advising the client on hosting/domain registration. I am also researching competitor’s websites for inspiration and looking into how to implement a panoramic photo feature the client wants on the site.

Competition Briefs:

Upsolar 2012 Print Ad Campaign

Brief: Design a Print Ad for Upsolar’s 2012 Campaign, which will entice Upsolar’s European and US customers with visually compelling graphics.

Rationale: I want to continue to develop concept-realisation skills and create something that communicates the message clearly so I can get away from creating eye-candy. If I struggle to think of concepts I will try to find someone to collaborate withso I can still work on the designing of the poster.

Deadline: March 23rd. I will spend the first part of this project working on developing concepts for this project since it’s deadline is the closest. I will set a personal deadline of March 9th to have my poster done in order to allow time for other projects, give myself a more realistic professional turnaround time as well as allowing time to gather feedback and make amendments if necessary.

Next: Research into who Upsolar are and what message they are trying to deliver and then develop rough concepts for the posters (on paper).

Practice Briefs:

Short Film

Brief: Over reading week I began a collaborative video project with a good friend under the name Emposi Productions and plan to continue working with him to film and edit a short film we have been writing/planning, which we aim to submit into a short film festival.

Rationale: I want to further my knowledge of filming and editing as well as building a profile for our operation via YouTube, Facebook and word-of-mouth in order to get future video projects.

Deadline: There is deadline for this project, however, I will have to work on this project at weekends because my partner is based in Milton Keynes so I will be limited. It shouldn’t take long to film and edit so I imagine it will only take up a small portion of my time for this project.

Next: Continue to write story and plan locations, actors. Also, continue to practice using our combined Video and Audio equipment so we are ready to shoot the film when we are ready. I also need to look into film festivals we can enter.

Other:

I would like to be involved in designing and laying out the group PDF at the end of the module as further experience of graphic design and layout for publication.

I am in the process of arranging a visit to a freelance web designer’s office to research the pros and cons of freelance work and also a possible Work Placement in MG Signs’ design department in Milton Keynes to gain experience in a professional environment.
I plan to continue to take on live client briefs throughout the course of this module to gain experience as a freelance graphic & web designer, create a name for myself and build my portfolio.

Rough Schedule:

Allocation of time per project =

Lippy Magazine: 40%

Fashion Website: 20%

NSGardens Website: 20%

Upsolar Print Ad: 5%

Short Film: 5%

Other: 10%

NSGardens Logo Development

Thu, 23 Feb 2012 22:19:00 -0500

I met with Neil Schumacker of NSGardens during reading week, arranged through a friend, and have engaged in my first paid web design job!

The first port of call was to design a logo appropriate for his landscape gardening business. Neil had a business card he’d put together with vistaprint but was happy to let me take over and design a logo for him instead of using the basic font he’d chosen to use on the cards.

The spec for this brief was to create a logo which looked corporate in the sense that it was professional and sleek but not so that clients expect the company to have a whole team of gardeners.

I spent a while scouring the net for examples of existing garden-themed logos for inspiration and to scope out the quality of the competition’s logos & web designs…

Original sketches for concepts:

Mockups:

Based on the feedback from Neil on my initial sketches I developed the chosen concepts in illustrator.

1. Neil really liked the concept but didn’t like the font because it’s too “tall and skinny”.

2. Neil preferred this version because it uses the font he originally chose for the business cards and liked the decision to use lowercase letters for the tagline, however, he felt the grass was too fine and needed more definition.

3. Neil’s response to this design was that it looks too much like a tea or coffee logo such as PG Tips, which I can see now he points it out.

4. Neil felt this looked too much like a sticker for a zoo or National Trust site so we scrapped this idea too.

Developments from chosen ideas:

I took on Neil’s feedback and developed his favourite design further to create the final logo.

1. This version was using Trebuchet MS as it comes, however, I felt that it could do with a slight edit to create a more defined ‘N’ and change the ‘d’ to make the angle on the ascender straight to differentiate it from the standard font.

2. I decided to make my own grass rather than using the live-traced version I used originally. To do this I found a really useful grass blade brush for illustrator, which I constructed a more defined grass texture, which I positioned carefully to work with the shape of the letters when I placed over the top of the logo.

I also tried my hand at kerning the typeface to make the spacing well balanced (using tips found here and after practising with this game.

3. With a go ahead on my progress from Neil, I added the tagline, ‘Horticultural Services’ in Caecilia light to add some delicacy and class to the logo.

4. The logo above was the final logo, which was used originally for the website, business cards and letterheads. However, Neil later decided to change the tagline to ‘Landscape and Horticulture Services’ so I redesigned the logo slightly to accommodate the new text.

FINAL LOGO:

Neil was really happy with the final logo and I feel like all the development work and changes have worked out to create a well balanced and professional logo.