Branding Project – Gardening Client

I worked with local start-up gardening company with an experienced team of gardeners to create brand identity. I designed and created the website: bloomsgardening.co.uk whilst also designing a logo with direction from the client. This is going to be used across multiple platforms, so I created a logo suite of all the neccesary files they will need in various formats. I created basic brand guidelines highlighting what file can be used for what purpose.

  • EPS
  • JPEG
  • PNG

 

Typeface Pairings – Web Fonts

Web Fonts

01. GEORGIA & VERDANA – Classic combination which will always please. 

02. HELVETICA (BOLD)GARAMOND – Another classic combination that will never fail. Helvetica is clean and neutral, making it a perfect match with Garmond, which is one of the most readable printed typefaces around

03. BODONI & FUTURA – The geometric structure of Bodoni and blend of thick and thin strokes makes it lovely font to look at. Put alongside Futura, it becomes a true beauty to view, which is why it’s commonly used in fashion magazines. 

04. FRANKLIN GOTHIC & BASKERVILLE – Baskerville is an old-style typeface created in 1757 which, when combined with the sans-serif 19th century typeface in Franklin Gothic, makes the design look sophisticated. Condensed versions of Franklin Gothic will give a really attention grabbing headline. 

05. CASLON (BOLD) & UNIVERS – Caslon is a robust Serif typeface, which gets its character from the short ascenders and descenders  and moderate stroke. It works well with the neutral Univers, a neo-grotesque sans-serif typeface. Changing between the condensed weights can really enhance the display font. 

 

 

Using Muse – Tutorials

I took the time too look at some tutorials before jumping into using muse. It has a very similar user interface to indesign, however one key element I picked up on was pinning. Pinning items to parts of the page means they are constantly in view to the audience. When considering my design, I should think about what information I want to be visible on the page as it scrolls down.

When the web browser shrinks, the items within the web page may distort and overlap in places. This is where breakpoints become really useful. When designing for the user, I can consider a whole range of devices that can be used to access the site. This means that I am catering for the users needs, and also showing my work off in the best light.

Another interesting resource that I can use in my design is the muse widget directory. This means that I can add interactivity in the design in the form of menus, maps, and even forms.

https://helpx.adobe.com/muse/how-to/create-responsive-website.html

 

Website Analysis – Reading Week Task

Carter Wong Design

What kind/type of website is it – Commercial/informative

Who is the website for, who is it directed at? Who might be using it – other design companies, graphic designers, brands.

Evaluate it in terms of its function and user group – what will they think of it? – The user will be expecting to see some sort of structured design, as the company are trying to promote themselves as a top design company. Theres clear segregation between the menu bar, the name of the company, and the more informative text and images. The use of a dark colour in grey to a lighter off white contrasts well and communicates well with the user.

Page size/length. Are these beneficial to the site or do they make it difficult? – If the window in shrunk or expanded, the display adapts, meaning the information is always in view and not bleeding off the screen. The images are always at optimum size as well which is good for the audience as its always in there attention.

How are images used? PMI but be specific about effectiveness and purpose – The images used are to promote the designers previous work, with attention to the most important brands. The images are arranged in a tiled format, which is in keeping with the straight lines of the rest of the design.

How is typography used? PMI being specific about:

  • Tone of voice of the type – The designer’s name is a in a bold sans serif font, with rounded points giving it a more welcoming, playful, and less formal feel. The word design below the designers name is all in lower case, which contrasts well with the all caps of the designers name, though in the same typeface. The typeface used in the for the menus and information is a serif font. This helps the reader easily read along a line and increases the readability. The audience would expect to to find the informative text in this type of font.
  • Choice of typefaces – are they effective for screen use? – I think they do work well on screen. They are easily read and the two typefaces complement each other well. The designers name is clear and is aligned in the same place on every page.
  • Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work – There isn’t huge amount of text on any page. I think the designer has done this on purpose, to draw attention to the images. These images visually communicate to the audience, and I think the minimalist design shows off the designers work in the best light.

Pentagram

What kind/type of website is it – Commercial/ Informative

Who is the website for, who is it directed at? Who might be using it – Other design professionals, brands.

Evaluate it in terms of its function and user group – what will they think of it? professionalism. On the opening page, there is next to no text, and the design companies work is displayed in even blocks on the page. Interestingly, there is a variety of work on display, from books from matisse, implying artistry, along with packaging, to screen based design and print.

Page size/length. Are these beneficial to the site or do they make it difficult? – The width of the page is dynamic, meaning if i shrunk the screen the images and text would format down rather than across, so I don’t have to scroll right and down. The banner displaying the name of the company and the navigation menus always stay win the same place, however are condensed to icons and a “P” which signifies the brand. When I scroll down, meaning the user doesn’t need to scroll up to navigate to a new screen.

How are images used? PMI but be specific about effectiveness and purpose – The images on the front show off the design companies work. There is a mixture of work, showing the audience that the company are not restricted to one medium of design, that they are diverse and have worked with large brands in the past. Interestingly, on the “Partners” page, the images of the designers are all in black and white. Black and white photography has connotations of formality and has a historic element. Also, the designers may have there own companies outside of Pentagram it unifies the designers under the Pentagram brand.

How is typography used? PMI being specific about:

  • Tone of voice of the type – The pentagram brand uses a modern, serif typeface, with strong contrast between thick and thin strokes. This gives the audience a feeling of modernist design. In comparison, the body text which is also a sans serif typeface gives the audience the feeling that the text is informative, but gives the feeling of modern and not old and historic like a serif typeface might. The difference in point size also distinguishes the informative text from the brand name
  • Choice of typefaces – are they effective for screen use? – I think the typeface choices work well on screen. The Pentagram logo is clear and give the right ideologies of the brand, feeling modern. The backlit display also sharpens the serifs and makes the design look clean and crisp. In conjunction with the sans serif body text, which also work well on screen with the same connotations of the logo.
  • Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work  – There isn’t a massive amount of text, which the designer has done purposely so it doesn’t distract from the images of their previous work. The text that is implemented is in a small box. The typeface used looks contemporary, like helvetica which is widely accepted in the industry as the most popular typeface. The most popular information is highlighted in red, in keeping with the brands ethos. I think they’ve used the colour red to evoke the feeling of passion, that they love what they do and love innovating.

What kind/type of website is it – Commercial/ showcasing their work to potential clients

Who is the website for, who is it directed at? Who might be using it – Potential customers, Brands, Graphic Designers.

Evaluate it in terms of its function and user group – what will they think of it? – I think the audience will think the design is sloppy. Although the main image is clear, the menu is far too small meaning its difficult to read and navigate. The white text is also lost in parts when on top of a white part of the background image. Also, for a design company I don’t think it shows off their potential as well as it could.

Page size/length. Are these beneficial to the site or do they make it difficult? – the page is fluid, meaning when the window is resized the design scales to fit. This is good as the audience is never distracted from the main images.

How is typography used? PMI being specific about: 

Tone of voice of the type – The typeface used in the design is a serif typeface, that gives a modernist feel to the design. The point size gives the design a minimalist and uncluttered feel, which may be good for the ethos of the brand, however the readability of the small sized typeface on a busy background is reduced.

Choice of typefaces – are they effective for screen use? – I think the typefaces used could be effective on screen, however the way they are used as previously mentioned means the reader may lose information due to the choice of background and point size.

Bulk or lack of type – is it too much, too blocky, too small etc. Say HOW/WHY it works or does not work – The text on some links of the site are very wordy, on a white background. This is wasted space that could be used to further promote the work they have previously done.

Spin – www.spin.co.uk

What kind/type of website is it – Commercial/informative

Who is the website for, who is it directed at? Who might be using it – other design companies, graphic designers, brands.

Evaluate it in terms of its function and user group – what will they think of it? – I think the audience will get a good first impression of the design company. Everything is clear and well laid out. I like the fact that the images are big and centre aligned, moving down the page. The menu is also interactive, and moves out from the side pushing the images over. The use of black i believe is to show power and dominance in the industry, whilst still feeling contemporary. The black background against the white text works well too.

Page size/length. Are these beneficial to the site or do they make it difficult? – The images scale proportionally, meaning that the audience always has sight of the purpose of the site, to showcase their work.

How are images used? PMI but be specific about effectiveness and purpose – I like how the images are tiled down the page. They are also big and clear, which shows off their quality. However, these large images mean that less is displayed, meaning the audience must scroll down to view more. Maybe if the images where tiled, the audience would see more and their first impression when opening the site might be more positive.

How is typography used? PMI being specific about:

  • Tone of voice of the type – The typeface used is a long, thin sans serif typeface. The typeface has contemporary connotations, adding a smart sleek feel to the design.
  • Choice of typefaces – are they effective for screen use? – The typeface choices are clear on screen, and suit the companies ethos and market.

Digital Media -Pinterest

  • Explain why you think it is digital media – Pinterest is a way of sharing websites and images with other users. This is a form of social media, and can be shared on Facebook and twitter so the user doesn’t have to repeat themselves over multiple platforms.
  • How designer s and lay people might use or work with this media – This is useful for creative minds especially, as the user can collate a library of work that they find inspirational or interesting.
  • Something about the mechanics of the medium – People pin things to boards and categorize them. Then other users can fill in search criteria that leads them to the categories, where they can view other peoples pins and pin them to there own boards.
  • Explain what your interest in this medium is – I use pinterest a lot for research and inspirational purposes. Its easy to navigate and look for interesting design pieces, and just as easy to to store for a later date.

Pinterest_on_Android.pngPinterest_1.jpg

Digital Media – Digital Photography

  • Explain why you think it is digital media – Before digital photography, photographers used film which was wasteful, expensive, and a long drawn out process. As photography developed, it became apparent that there was growing demand for quick, instant access photography that was available to the masses. What digital photography lacks in anticipation and traditionalism, it undoubtably compensates for in efficiency. There are three main positives from digital photography: Quickness, Adaptability, and Post-production.
  • How designer s and lay people might use or work with this media – Most people have access to some sort of digital camera these days, whether it be a mobile phone, a compact camera, or a DSLR. Everyday people may used there smart phones to take snapshots. These pictures used to be lower in quality than those you would take on a compact or DSLR. However, as technology has advanced, the quality of the camera and images has risen significantly, to the point where they can rival images taken on professional camera equipment. The user of a smart phone would take images for the purpose of social media uploads, where the quality of the image would be less important than the image it self. Compact cameras and DSLR’s have a digital display, where the user can manipulate features such as the iso, aperture, and exposure. This is good for when the image is the main focus, and the quality should be better so the audience takes an interest in the image.
  • Something about the mechanics of the medium – As previously mentioned, the settings can be changed by the user to manipulate the final resulting image. The user can also compose the image using a digital LCD display, which is useful so the photographer doesn’t have to bend down and view it through a view finder. The resulting image can also be viewed on the LCD screen, meaning the user wouldn’t have to wait a long time for the film to develop in more traditional methods.Iphone_Camera.jpg
  • Explain what your interest in this medium is – As a graphic designer, I visually communicate with my intended audience everyday. The importance of quick, effective, and good quality photography is key in my job. The quality of the image must be the best possible, so the signifiers aren’t lost to the audience. I used my smartphone for my blog, as its quick and easily accessible. Also the image quality is less important for demonstration purposes on my blog. NIKON_D60_1.jpg

Asahi_Pentax_S3_with_film.jpg

Digital Media – Facebook

  • Explain why you think it is digital media – Facebook is a platform that allows users to share media online, anywhere in the world. The site gives the user the ability to raise there digital media profile, and broadcast there thoughts and feelings through status updates.
  • How designer s and lay people might use or work with this media – The user can communicate with there other friends using the service. They have the ability to share images, video, and messages with other users, increasing there social interaction without having to be face to face. The user can also create groups, for example if the user is part of a football team, the groups message board can advertise the game time, date, meeting time etc. Advertising companies have exploited this service to send targeted ads based on the trends of their search history. This has spread debate across the world about data security. Does the user know their information is being stored and sold to a third party? Facebook_Mobile.jpg

Many companies have used Facebook as a free way to advertise there business. A strong social media presence is incredibly valuable to a business as it opens up the barrier of communication and accessibility to the wider world. Reviews, comments and information can be shared on a businesses “wall”.

facebook_laptop_sml.jpg

The user also has the ability to share across multi platforms, so the same message doesn’t have to be repeated lots of times to the same audience.

Twitter_Share_Facebook.png

  • Something about the mechanics of the medium – The user initially sets up an account with Facebook, supplying them with personal information, and critically an email address and password that Facebook can communicate with the user. For example if there was a security breach, Facebook are able to email the user to their personal email address to resolve the problem. After the setup process, the user befriends all of the people they have associations with. After these people have accepted the friend request, the users are able to look at each others media online. Each post is displayed on “the newsfeed”, which is like a continuous feed of media to scroll through.
  • Explain what your interest in this medium is – Everyone these days has a Facebook account. I personally use Facebook to communicate with my friends and colleagues, as it is quick and accessible. As the site is online 24/7, there isn’t any need to save phone numbers, as the data has already been entered by the user in the setup stage of the account. The user can change or update these details at any time. I also used Facebook a lot when I traveled. It was an easy way to share experiences in the form of images and videos. I simply created albums and uploaded them onto the Facebook server. My friends were able to see the media and comment or “like” individual images, sparking debate amongst my group of friends.