Lightmaker Bomb Project: Creative Rational

I wanted to make sure my client fully understood every point I made during the presentation. So with this in mind, I wrote a short creative rational that the client can take away with them. This also help distill my design choices in my mind, understanding why i’d chosen to design the way I did.

Rational.jpg

Advertisements

Lightmaker Bomb Project: Final Design

I created the site with fullpage.js in mind, something that i’d been shown at work and have identified in other sites. I think it could be a good way to compartmentalise each section and create a hierarchy of information. I wanted the user to have the flexibility of scrolling, or choosing the specific section from the sticky navigation at the top of the page.

The user is first met by an aspirational image of a driver, with a small amount of text introducing the brand and what they are all about. There is a small call to action below the text inviting the user to read more about the story. They’re also able to click the logo to reveal the about drop down.

I felt it was important to tell the stories of each driver, but I wanted the user to be able to choose which driver they want to scrutinise and find out more information. Invictus has two teams, so I wanted to distinguish them by adding a slider to toggle between the two teams drivers. As you can see, the number of the team has a distorted effect added to it. This was a design choice to encourage the notion of speed, inspired from the Nike Logo story, and the British GT program I found.

The car has been heavily modified to suit the needs of the rehabilitated drivers, which creates a USP for the brand. This is another thing that separates the Invictus brand from the rest of the teams in the GT Championships. I want the user to be fully immersed in the car, giving them up close and personal experience of the car, highlighting key aspects using buttons that reveal overlays that gives specific detail and more information. The user is again able to toggle between the interior and exterior of the car. Inside the car i’m proposing having a a VR experience, where the user is able to tour the inside of the car with their VR headset, again fully immersing them in the car.

Invictus Racing will be competing all over the country, and be in the public eye a lot. The brand has quite a big social presence, and this could be a good way of generating new content to the site. I designed some overlays to anchor the brand further, again using the “cut” design feature that runs consistently throughout the design.

I wanted to give the fans of the team and sport exclusive access to content that regular users don’t have. The user is asked to signup or register for full access to exclusive content, which is a great data capture tool for the brand, where they could use this information to target users with promotional material.

Finally, sponsors inject a lot of money into the team, and they want to make sure they have a presence of the site, as they are partnered with the brand. I wanted this section to appear tasteful, sophisticated, but continuing with the brands ethos.

Desktop Homepage.jpg

Conclusion

I feel like i’ve learnt a lot this week. Even though in theory we had a week to complete the project, I have other work commitments during the week, so really I only had 3 days to complete the project in its entirety. I was aware of this tight deadline and tried to work efficiently in photoshop from the start, structuring the PSD in a professional manner. I did this so if it was a live project, and another designer needed to work on my PSD, they may be confused if they layers aren’t structured in folders. It also makes my workflow much faster. When you compare this project to the piece I created last year, World of Tanks, the difference is staggering. My eye has been trained to see finer details such a spacing, line height, and the impact of the imagery i’m using. I have made mistakes throughout the design process, but i’ve been able to take a step back and identify them quickly and rectify them. Overall, i’m happy with my final outcome, but i’m most proud of the way I presented. I’ve worked hard with colleagues at work about being confident in my own ability and what I design. If I don’t buy into what i’ve created, then how is the client? I was able to talk with conviction and confidence about my design, not putting myself down, and presenting my ideas in an enthusiastic and energetic way.

 

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