Responsive - J20

The first thing I wanted to do was look at what the logo and design used to look like. Luckily the project pack provided me with this.

It's quite surprising how much the look of the logo and overall design hasn't changed. in the brief the company described it to be known for being chavvy and I think thats true. It doesn't help that it hasn't changed since the late 90's, at the minute that style is coming back but not in design.

There's less products now then there was in the beginning which is a shame because it shows the company not to being so well.

Responsive - J20

The Brief 

Background

J2O was born out of Britvic’s historic expertise in juice blending. When it launched in 1998, J2O was a pioneer in the adult soft drinks category, enabling consumers to have a satisfying drink experience that didn’t disappoint when socialising with friends.

By expertly blending different fruit juices with their unique aromas, J2O is carefully crafted to create a satisfying and multi-dimensional taste experience. The drink delivers strong, well-rounded flavours that have a velvety, sweet mouth-feel with lingering fruit flavours and a zingy finish.

However, despite a strong heritage story around blending, many consumers are not aware that J2O is a blend of two fruits.

Target Audience

25–35-year-old men and women who love getting together with their friends and family, both in and out of home. They are grown up, confident, have an established social network, and feel relaxed with those around them. They don’t need alcohol to boost their confidence or lower their inhibitions and are happy to interchange between alcohol and soft drinks.

Creative Challenge

As it stands, 40% of J2O consumption is by those aged 16 and under, but we’re wanting to change that. The current artwork design is not seen as ‘adult’ by many; the colours are viewed as bright and childish, and some consumers have even described it as cheap and ‘chavvy’. We’d therefore like you to redesign J2O to appeal to a target audience of 25-35-year-old men and women. The design should make them proud to be seen holding J2O in bars, restaurants and at home, and should bring through J2O’s expressive, unpretentious and playful personality.

Designs must be created for both our Orange & Passion Fruit flavour and our Apple & Mango flavour. Please also come up with packaging designs for the 4pk packaging for each of these flavours. You'll find cutter guide artwork in the Project Pack.

Our flavour descriptions are:

Orange and Passion Fruit
J2O O&P is a perfect marriage of the honeyed and fragrant passion fruit and citrusy orange tangs

Apple and Mango
J2O A&M is a delicious combination of mild apple flavours mixed with the sweet mango aromas that create a smooth, mouth-watering drink.

Considerations

• Ensure that consumers know that J2O is a blend of two fruits.
• The J2O logo and bottle shape drives consumer recognition so must be maintained.
• The J2O brand is synonymous with the colour green that is on all of our packaging. Please make sure that it features in some capacity when coming up with design ideas.
• In the past, the depiction of fruit on our packaging has increased taste credentials so although it’s not compulsory to do so, bear this in mind when coming up with design ideas.
• We would encourage you to visit bars, pubs and supermarkets to view J2O against its competitors to better understand the scale of the challenge. 

Creative Requirements

Please share up to eight images in total showing your solution for individual bottles and four pack, along with supporting information that briefly articulates your idea in words (up to 400 characters)

Should you wish, you can also submit physical material such as prototypes and mock-ups etc.

We’re also interested in seeing the creative process that led to your final idea. This can be hand sketches or alternative design directions you explored before selecting your final one.

I'm very interested in this because you actually get to redesign something, the other briefs I've looked at are quite hard to work out what they want. The simplicity of this brief will be a good one to start me into live briefs. I've also thought the design is a bit rubbish for while as well.

Design for Web Workshop

Web standards and limitations, acronyms and abbreviations 

Layout

Setup

Basic coding

Limitations 

Web safe colours - 50 Shades of fray or 216 colours. when colour first arrived web computers could only support maximum of 256 colours on their 8-bit monitors. a list of 216 'web safe colours' were identified. 
These colours can be consistently reproduced across the web sung HTML, specifically a six or where possible a three digit hexadecimal code.


Red
#FF0000
#FF0

White
#FFFFFFF
#FFF

The RGB colour mode is capable of reproducing 16 million different colours, significantly more than HEX 216 colours.

The combination of Red, Green and Blue value from 0 to 256 x Green 256 x Blue 256 = 16,777,216

CSS gives you more colours than HTMl. Specify the percentage of 255 per RGB

100% red would be, RGB(255,0,0)

The full RGB colour range would only work on very new computers, you have to pick your target audience carefully in order to work out where to use RGB colours or Web Safe colours.

Web Safe Fonts - If you had a modern font that isn't web safe it will change the font to Times. You need to specify a font family, so there's a fall back and maximum compatibility. It will go through a series of fonts thats similar rather than straight to Times.

Double barrelled name needs to be in speech marks to group as one typeface.

Arial, Helvetica, sans-serif

With CSS you can install a font on the server, for it work across any computer. Called Font Face, it breaches licensing and copyright laws. Font has to be free to use and free to distribute.

Font Squirrel

Size, dimension pixel resolution 

640 x 480
800 x 600
1024 x 786 - start working here
1920 x 1080
2880 x 1800 (220ppi) - capable of working at this size

Needs to be able to work at the smallest size and then go up and adapted. 

File Format

PNG
GIF
PDF
JPEG
The four most common to encounter.

Resolution has changed, 72ppi is outdated but used a lot still to keep the file size down, computers are capable of 96ppi and macs 220ppi.

Lossy 
Compressed

Dreamweaver

In order to create something you have to create a folder on your desktop for all the work to be saved into, so that nothing is lost. 

This is what the Dreamweaver page looks like when the website has nothing on it, you have to put information in the open body bracket. 

This is the style sheet which is CSS which is more efficient and an easier way to code. 

Through the coding we can change the typeface size colour and position of the page. I liked this session a lot and interesting to learn something I haven't done before.

Grids

Muller-Brockmann Grid - Modernist 

• Determine type area
• Divide into 2 columns 
• Divide text columns into 3 fields
• Determine type size and leading
• Insert empty line. Field lines must be separated in order to accommodate gaps between images

Each field should contain a number of lines of type should be able to contain a single line of type. Images places on the adjustment column will perfectly align with the type as will the image captions

We also had to work out the grid on articles we had brought in.

This task was a bit confusing but as I did the first grid I understood why we had to do it. I quite Muller's grid system because it allows the designer to have a lot of power.

Canon of page construction

Canon's give methods and order, it's easy to rely on these whe

n you're not inspired for a layout
Possible to over rely on them when you're struggling 

Golden Ratio 

a to b = 1 : 1.618
a+b to a = 1 : 1.618

The golden section of a 100 cm

100cm/1.1618 = 61.80cm
100cm=61.80+38.20cm

the ratio of 61.80cm to 38.20cm is 1:1.618
Adding

100cm x 1.618 = 161.80cm 
the ratio of 100cm to 161.80cm is 1:1.618

At first I didn't understand this at all but when you actually attempt it it becomes easier to understand

This rule applies to type as well, type headings and body text can suit each other with it, such as a 55pt Heading and a 34pt body

This is the golden rectangle that I drew. I started with the smaller side so it would fit onto the page, the measurement was 14cm.

From there you go 14 x 1.618 = 22.652 producing the longer side and creating the rectangle

To create the next square you have to divide the measurements

22.65/1.1618=14

14/1.618=8.65

8.65/1.618=5.34

5.34/1.618=3.3

3.3/1.618=2

2/1.618=1.23

These measurements create the squares that follow the golden ratio rule

After that to make it make sense for designing, we had to create columns and rows for a spread. I found this very confusing and difficult to start with because I didn't understand if I could put the lines anywhere after the calculation. I played around with it and think I started to understand it. 

I applied the same measurements to keep it simple, but them along the narrow axis as well as the longer axis to create the horizontal lines.

We also looked at a grid called, Van de Graaf Canon.

Graaf observed type area in books and determined by proportion of spread and page. His grid normally works for double page spreads.

Canons are methods and systems that inform your process in design.

I struggled to understand why I had to draw this, I like the idea of it but when looking at pages that use it, I can't see it. But I think this is because I'm new to Canons. I like using grids and rules to design layouts so will probably use these if appropriate on my website.

Website Brief, Crit

We had student led crits today which were a help because I hadn't really thought about my website and what I could do with it.

I got a few good ideas I want to work with such as;

A type time line - quickly showing how hand rendered type came to be 

I was thinking have the major events on a line and extra information available when you hover over it 

A forum - I want to educated but involve people, and create artwork rather than just use other people's. So I'd like to create a space where people can upload their own work. I would set a challenge so people have a sort of brief. 

Chat - I think it would be useful having an area where people can chat to each other, asking for help etc.

Professionals and amateurs can be involved

Unsure on the look of the website so far though, I think because there will  be images, a plainer kind of design will look good

Website Brief, Ideas

In order to know how I want to design my website, I need to know what I want to communicate and how I want to do that. 

What's the purpose?

I want to create a place where I can give people tips and things I have found about hand rendered type. Also I think it would be good if it was interactive

Forum type thing, people can chat to each other and swap problems etc
Set a challenge a week? So rather than using other peoples work, I get people to create new work

Who is the target audience?

Creatives who want to start hand rendered type, or people who are involved in it and want to give advice etc. Both ends of the spectrum from beginner to pro can be involved

What does the audience need?

They will need to be involved and genuinely interested in the subject.

Website restrictions

Colour, font, size - I think because there will be work going up, a simple and plainer website design will make it work a lot more

Website Brief, Research

Simon went through some things to look out for, either stay away from these trends or research into them.

Trends - 

Decline of Skeuomorphism - This when things are designed to look real even though you know they're not because they're on a website.

There is no real point to this, I don't even think this looks good. 

Rise of flat design -  Things are having less rendering and being made to look 2D rather than the once pop. Again Apple are the company to think of, they have changed the ios look

I've looked at this website that holds hundreds of single page websites. It's a good resource, I think single page websites are slightly easy to use. 

One Page Love

 

This was one of the websites I looked at, and because theres a big image it looked like it would be dead slow. At first it wasn't but going to the different pages, likes gigs etc it did load slow again. The firs 5 seconds are when you decide to look at it or not, and this lost me half way through.

This website is ultra trendy. It's one page and flat design, I quite like the look of flat design because it's easier to look at I find. My website will be about hand rendered type so I don't think there will be much need for 3D look.  

Responsive Website Designs are for a website that would be used at different sizes such as an Ipad, Iphone and normal computer screen. Grids are used to make sure when it is resized it stays the same, the screen resolution would be 72.

Type based websites, I thought, would be purely type, but I've came across this one that uses image quite well with type. 

This website, is a personal website for a designer in Seattle called Weston Vierregger. I only know his last name because of the website I used to find him. His website is really well designed, it has a lot of clever details, like the type fading as you scroll. However, it's very hard to work out his full name, and to contact him. 

Logostarter Brief, Evaluation

Evaluation

I was very excited by this brief. I thought the idea of branding a real company would be interesting. I chose a company with no branding because I thought it would allow me to anything. I quickly spotted Grandma’s Sauces; I thought straight away there was a lot of scope to design for them. They had a very clear ethos, that the homemade family recipe was the most important thing. I could see that a hand rendered style would communicate this the best. I’ve wanted to do hand rendered type for a while, but never had a brief I thought it would be appropriate for.

I sketched up a few ideas but knew the style I wanted, quite feminine and delicate because this is from Grandma, it needed to communicate that. I really liked pencil drawing of the design, but when I scanned it in I think it lost the detail and smoothness of the design. The scan picks up on a lot of smaller detail that can ruin it. When colouring in I couldn’t settle on one combination for a long time. I’m still not happy with it and I think that is because its digital.  I think I lost the quality of the design, which made it hard for me to like this logo.  If I were to do it again and had longer on it I would draw the design a lot bigger, use a good pen to sketch it up and obsess over the lines.

I worked quite a lot on the look of the design and tried to make it look good but to me it doesn’t. It doesn’t look professional, there’s no clean lines and I’m still  not 100% happy with the colours. I think I struggled with it so much because I had drawn it and wanted it to look better than my drawing.  I also missed the crit for being ill and I really regret that because I think it would have been very helpful. However, I did ask members of the class and my housemates for their opinions. I think it’s helpful to get a non-designer for their opinion to see if they understand it and to see if it works in the world.

My aim for this brief was to create a logo that communicated a home made family recipe that was many years old. I think I have achieved this, because of the hand rendered type. However I also I have failed this because it doesn’t look professional. I’m not sure if its believable as a brand, especially one that wants to be sold in Harrods. I think if I were to do it again, I would practice the drawing more, use a better sketch to scan in and use better techniques to colour it.

Logostarter Brief, Branding Considerations [ Study Task 04 ]

Branding Considerations

Research is really important in trying to build up a brand identity. If this brief was wider I would further by research. At the minute I looked into the client’s ideas about their product. I read how the old the product is, where it came from and what it means to the company. It is a healthy natural organic food so I looked into organic food brands that sell well to understand what they are doing right and how they have made their brands big and adaptable.  This product is quite a small business idea because it is home made and an old family recipe. Further research would help me see how I could make this go further. The client says they want to sell it in Harrods, which is a big idea when there’s little funding and no such branding identity.  So to know how I could get this into Harrods, I would look into smaller food products that are in or have been in Harrods. I would look at their branding and see how well they have been selling, and depending on their success maybe modify the design.  I would only modify the design to make it better, because I’m not that happy with it. I would keep the look of it but design it a better standard and make it look more professional.

In order to sell a product well the branding needs to be strong and advertised well.  The client wants to sell their product in Harrods. Harrods does not have any kind of poster adverts inside the building. However it does have a good high fashion magazine. In order to advertise this for Harrods I would create a high fashion kind of advert. I would have an image of a lady cooking in her big Victorian kitchen, and have the products on show. There would be a shelf full of jam jars with the logo on. Jars would be full of all the products such as a Pepper sauce and the jams the company make.  The lady in the advert would be a bit older around middle age because that’s who my target audience is. I don’t think younger people would look at this sauce because of the name but if its being sold in Harrods, they probably wouldn’t want to pay the price for it either. This older lady would be wearing the apparel, such as the Grandma’s Sauces apron and also using the tea towels.  It would be a very warm homely advert because that’s what I think the product is. I think it stands for home cooked family food.

This company is small but wants to be bigger and one way is making a digital presence. In order to do this I would create a website that was easily useable. My target audience is older but I know a lot of middle age people are very good on computers, so I think having a website will be useful and work. There’s no need to think that middle-aged people are hopeless online and that it would be pointless to have a digital presence.  On the website there would be updates on what’s being made, more jams and sauces etc. There would be a recipe book to tell customers what goes well with the products. There would also be a forum page, so people can sign up, get updates on the company and also have chats with other customers. They can write on a noticeboard type of page their personal favourite ways to use the sauces and jams. Having a website will be very beneficial for the company because they can get more funding by allowing some other companies to advertise on their website. They can also advertise on other food related websites and get their name around.

I think this company would succeed with further branding to complete the package. The logo is quite easily adaptable to put online, in adverts, on apparel to get the name around. The point of family ran business can be further communicated in their TV adverts, magazine adverts. The print adverts could differ in style when it’s in different magazines. The target audience, I think will react well to the styling of this brand. I think the hand rendered element relates to the homemade idea. It communicates the ethos well.