fmp

Making my style guide.

This slideshow requires JavaScript.

To round up my whole project, I thought it would be a good idea to include a style guide to showcase everything I have done for my brand, bringing everything together, as well as seeing all of the links in one booklet.

I got a lot of inspiration from the style guide of Kew Gardens, which I had found to get information and ideas for my other project on the side of this FMP: Connecting, which ironically has connected these two projects because of the style guide.

Like the rest of my brand design, I kept the style guide simple, showing only what needs to be shown for people to see and understand what has led me to where I am now, as well as showing why something in the brand is how it is.

This slideshow requires JavaScript.

I’m really pleased with how my style guide looks. It is clean, fresh and shows a good, detailed understanding of how you can use the brand and apply it yourself whilst keeping to its theme and brand identity.

The style guide includes information about colour blindness also, as well as showing all of the necessary examples of my work that is important to be shown in the style guide, so that they also are recognised. This is because I have a lot of elements in my project, and it is important that everything is presented, to show the work I have put into this.

What I am going to do with my style guide is print it on high quality paper and ring bind it, to give it a fresh and professional appearance. My style guide is a part evaluation/guideline of my project/brand. I thought this would also work well with giving to customers, if they were to purchase a product for the first time, they can receive this booklet to give them some information also, bringing closer the relationship with the brand and their customers.

Posters insitu.

Image on the left: The text needs to be pushed up at the bottom to allow more room for cropping.
Image on the right: Same applies, the whole canvas needs to be ‘shifted’ up to make the gaps even at the top and bottom of the page

Image is very clear to see and read from a distance

I decided to mock my pictures up on billboards and posters, as I would like them to be advertised. Doing these mock ups helps me to see what is good and what needs to be improved on the posters, considering the fact that the posters need to be easy to read from a distance.

Final adjustments

I could still see in this poster that the type at the bottom was quite close to the edge, so I have decided to shift it, leaving a much more even gap at the top and bottom of the page.

Final adjustments

Similarly to this photo. I wanted to use up a little bit more white space that was on the page, so I decided to centre the web address to allow it more focus, as well as bring everything up evenly. I also moved the logo to the top right hand corner, giving everything more room.

Here are the adjusted posters fitted insitu with how I would like them to be presented. I’m really happy with how they have turned out so far, and with the small adjustments made, it makes a lot of difference to looking at the pictures.

Final adjustments.

I want to print my postcards using Moo, a printing website that produces in high quality. As I saw my postcards on the preview, I noticed that the landscape postcards’ notes were very close to the trim and bleed.

I want to make sure that there is a good enough gap to prevent any trimming happening on my postcards, so I have decided to move the notes up on the landscape images. Understanding how the bleed and trimming works, it is important to make sure that any text is at least 3-5mm away from the trimming mark, to make sure that no clipping occurs, or that the text does not look like it is going to fall off the page.

Making my style guide: inspiration.

Having completed the main elements of my project, I want to create a style guide for my brand to bring everything together. Because my branding has so many elements, a style guide will help to tie it all together.

I had a look at a few existing examples, as well as looking at the guidelines I used for my Connecting project: Kew Gardens postcards. Looking at the style guides, they all explain how the brand works, the background and how you need to apply the elements to ensure that there is a same theme running throughout the work to ensure that it does not change, otherwise it would run a risk of preaching copyright.

Looking at my work, I will need to ensure that I include the following:

  • Background of Chroma and about CVD
  • Brand elements (typeface and colour schemes)
  • Logo variations
  • Size limit of logo on print
  • Print formats
  • Resolutions for screen and formats
  • Visuals for portrait and landscape

By creating a style guide, it will show how the overall design and concept of my branding is different in comparison to the rest of the clothing brands out there, and how I have chosen to take different routes of design elements during the process.

Moreover, I intend to have my style guide printed, which can also be possibly used as a booklet to be given to customers if they were to buy my products, as it will give them an insight of how the brand has carefully thought about every step of the design process, making sure that Chroma has secured that gap in the market.

https://designschool.canva.com/blog/50-meticulous-style-guides-every-startup-see-launching/

http://assets.kew.org/files/Kew%20Brand%20Guidelines.pdf

Taking my posters further Part 2.

I tested out my posters to see if they still worked in black and white, and to my surprise the posters I thought looked better than in colour. The text is still just as clear to see, and because of the hues merging in some of the colours, the text appears clearer to see.

Protanopia

Deuteranopia

Protanopia

Deuteranopia

Protanopia

Deuteranopia

Even in the colour blind mode, the posters appear to be clear to see and the patterns are still clear to distinguish. Because it is so important for my brand to be clear to see to my target audience, doing these tests shows that the design of the brand has taken the target audience carefully into consideration.

Making my posters Part 1.

This slideshow requires JavaScript.

From the research I had gathered to make my posters, I was still inspired to want to include movement in my clothing without including models. I decided to illustrate silhouettes of parts of people to mock up onto the clothing. I purposely did not include faces however as I felt this was more effective.

I found making the posters quite difficult, because the poster needs to be catchy, quick and appropriate for everyone to see and read, especially for my target audience. Because of my minimalistic theme also, I found it difficult to create the posters without adding too much or too “little” that people do not notice the poster.

I began with putting the clothing pieces together and the Ishihara logo, which is the most important element for the poster. I then experimented with typography and how I could make the typography interesting, bold but does not take over the images of the clothing or the Ishihara image.

1

2 – I decided to change the title to the next image. The ‘IS’ now looks bolder against the confidence.

2 – Adjusted image

3

I thought it would be a good idea to include colour on the background and have the colour weaving through the clothing, giving the poster more depth. I also decided to de-saturate my clothes, which ultimately is the only object on the page that has purposely been changed to black and white.

I did this in response to my previous experimentation of turning the clothing black and white for my poster; the overall effect is clever how it shows the audience that the clothing advertised does not need to be shown in colour, because that is not what the brand is about.

I wanted to draw this link to bring everything together more. Although the clothes are in colour, by advertising them to the public de-saturated, it grabs their attention more. The desaturation appears subtle against the bright colours, meaning people would not notice it until they look at the poster more and realise the objects advertised are the ones with the least colour, creating a spin on the poster.

I also decided to include a landscape version to show how the poster can look in different ways. The benefit of a minimalistic poster with various shapes of colour means it can be very flexible to how it can be positioned, and the template is easy to change and adapt.

I feel my posters have worked well for this whole project, they help to tie everything together well, as well as link the Ishihara effect with the brand.

Making my app design.

This slideshow requires JavaScript.

Designing my app was a lot easier than designing my website, because I was able to use the same theme that I had designed for my website and apply it for the app. The difference was I had to ensure that the theme could be compressed into a tight space. I was aware of this situation as I was designing my website however, which put me in a better position when it came to creating the final app.

I had included a few smaller changes than on the website, such as creating a menu page instead of a banner, and making a few buttons more notably visible than on a website, because of the restricted space, I had to make sure that it was still easy to navigate your way around.

I also included the ‘scan’ page in the center; this is what people will use to scan the barcodes on the clothing. People can have the option of manually putting in the code in the ‘search’ bar that frequently appears on the app.

Making my app was very fiddly with the footer bar, as I had to make sure that the bars matched the correct pages. I also designed my own icons for the bar to match the rest of the icons I had designed to keep to the minimal-modern theme. I was testing frequently also that the website was easy to see using the greyscale effect on my laptop, ensuring no colours were merging.

A lot of the pages are kept very similar; the main difference in the design is that the images are laid out a lot more simple and clear, making it easier for the audience to know what they are looking at.

I’m really happy with my overall outcome, and after putting it on Invision, the app looked realistic and the overall design concept worked well, alongside with the website. What I intend to do now is to make my posters using the illustrative style that I have previously researched, and to experiment with sketching over pictures of figures, giving the clothing more movement in the advertisement.

Clothing app layout inspiration.

I wanted to explore a little further into clothing app designs and how they are accessible to people easily. Because apps are in a confined space, I feel it is much harder to get a good design across to the public, as well as a lot of information. Looking at these examples, I can see that big imagery and clear separation of text is essential, as well as making sure that the navigation is clear and the design itself, such as the font, is clear to see for everybody.

Having a look at these portfolio layouts also, I can see that everything should be clearly labeled, however I found it interesting that not every page was shown. What I have taken from this is that only the essential pages need to be displayed for people to see and understand the general aesthetic, which is important for me to consider when it comes to presenting my final website and my app design in print.

Although I have created my final piece using Invision, it is also important to show a physical copy of my final results, and by looking at these as my inspiration, I can use these as a guidance to how I can structure my pages, also for my exhibition. Ultimately, I want people to understand what my project is about when they first glance at it, and the simple design layout I hope will give them a good indication of my theme and message to all of my target audience.