chroma clothing

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

Adjustments Part 3.

I thought about how I could take my posters further without adding too much to them, and I decided to see how silhouettes of hair would look like on the figures, rather than faces. I decided that it looked better without especially on single pictures, as that could single out genders on the advertisement, especially as first glance if you are unfamiliar with the brand.

Alternatively, I had a go with including a ponytail on the landscape image. Because there’s two ‘people’ on there, I thought it could differentiate the people a little more, as it shows that the clothing brand is clearly for both male and female. What I intended to do, was create a style guide to show the specifications required for this brand. Because there are so many elements to this project, having a style guide will help to tie everything together well.

Despite this, I felt the hair did not suit the picture. I feel the poster needs to be kept simple, and to keep the silhouettes as they are, knowing people could see them as anyone this way.

1 final

2 final

3 final

I also changed the hand on one of my posters, making it look more realistic. These small refinements have helped me to be able to ensure that my posters are looking more professional, and soon to be ready for print.

Adjusted image

I wasn’t completely happy with this picture still, because I was concerned with how close the logo was at the bottom to the trim mark. I decided to make the logo smaller and move it in slightly. Because the logo is already apparent on the Ishihara image, as well as the title of the website being centred on the page, the logo can appear to be big enough to be seen, but not big enough that it takes your eye off the rest of the page.

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.

Experimenting with my poster.

I had a go at putting the illustrations on top of the clothing pieces, as well as putting together the clothing pieces. I also thought about using silhouettes instead of people to put on the figures. Both I felt did work, however not combined.

What I think would work well however is illustrating the arms and feet only without the face as shown in the first image. I felt that this was the most effective way of illustrating bodily features without singling out what someone should look like wearing the clothes. This way, it gives a much more subjective feel to the advertisement, giving more option of more people to feel like they can wear the clothing.

The silhouette alone also adds more movement in the image, without overpowering it, which is what I want for my poster. To refine it, I will illustrate the arms and feet again but more precisely for all of my chosen items of clothing.

What I will do following from this is to illustrate on each individual pair of clothing I have put together, and to try and see how I can get the parts to fit with the clothing.

Experimenting with my clothing and illustrations.

Moving forward onto my posters, I have decided to proceed with including illustrations of people on the clothing, because I feel this would be the most appropriate way to advertise the clothing, as well as making my posters look different in comparison to other advertisements that are out there.

A lot of fashion use models, however I don’t want to advertise specific target groups or ages for my brand, as I want it to be accessible to everyone, aware of the fact that people of different ages suffer with CVD.

I found a few more images to give me some inspiration of how I could set out my illustrations, and in response, I quickly cut up the pictures I had printed and played around with what clothing items I wanted to pair up for my poster.

This slideshow requires JavaScript.

Having done this, it enabled me to see what would look good as an outfit, and what potentially wouldn’t. I wanted to include movement in the images also, which is why I laid out the clothing items in the way that they are. Adding movement in the photo I felt gave more meaning to the clothing, as well as when I put my illustrations with the pictures; it would help to being the poster to life more.

I quickly sketched some faces that I would like to use for my poster, and I drew them in the style that I felt would work well with the images, as they are simple, but I felt that they would add to the images well, especially when I mock them up.

Putting them altogether, I could see there were some ‘size’ adjustments, however I can see what my idea would look like once I put it into illustrator to refine. So far, the results are looking clearer to how I would like my advertisement posters, as well as keeping to my whole theme of simplicity and inclusion of everyone.

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.