colour blind

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.

Final posters.

I still felt this image had further room for improvement. After printing the pictures quickly I had a look at what I could do to take these further and improve them. Eventually, I began to experiment with where everything was going, and I added some more depth and shadows in the pictures.

Improved version

I realised adding the small details such as shadows in the background of the image, the picture began to look a lot more vibrant and noticeable. Similarly to all of the other pictures, I tweaked them so that they all fitted the same and looked similar from each other.

Improved version

Improved version

Having the new designs mocked up on these signs also has helped me to see again how they would look if they were presented in real life, as well as getting understanding of what you would see first when you look at the page. The pictures are quite busy, but I think the execution of levelling everything so that you focus on each area differently has been done well, especially now with the final amendments.

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 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.

Saved items page.

Page: Saved items

On my saved items page, I have decided to include a magnifying icon with a QR code on some of the items as shown. This icon will mean that the customer has looked up the item using the app and scanning the code from an item of clothing that could have possibly been from the store. By doing this, it ensures that the customer will not forget any items, and it also means that the customer then has the choice to buy the item on a later date if they did not want to purchase it right away.