How I learnt how to steal like an artist in a month and designed & built my new company’s website
#4 — Fourth month of my challenge: 12 topics to learn in 12 months
Maybe you are wondering why I called this article “How I learnt how to steal like an artist”, actually I didn’t learn how to steal because I already know this .. just kidding hehe 😬. In fact this title comes from the book Steal like an artist — Austin Kleon that my mentor recommended me to read.
“Art is theft.” — Pablo Picasso
What I initially wanted to learn this month was design theories and after discussing with my mentor she told me to learn about the meaning of colors or typography. Since I wanted something more generic to start, she told me about this book that teaches you in a fun way how to find inspiration, how to keep the motivation, what is the good design workflow and how to keep being creative and productive. As you can imagine I will keep color theories and typography for another learning month!
I have never actually studied design itself, I consider myself as a designer & developer because I learned by practicing and that is the main reason I want to know more about the theories. Maybe I have the imposter syndrome 😨 and this learning month is here to stop it!
I started the challenge on 6th of July, if you read the previous post of the Learning Lab Challenge where a built my first progressive web app, you can see that I finished it on the 13th of July. Yes I was doing a bit of both between those dates, and it’s bad. It’s mainly because I committed on delivering our new company’s website 😃.
Preparation
- Finding a mentor
I chose Vera as my mentor. She was my colleague in my previous company, and she is very talented. - Defining the scope of the topic
As describe below, I will limit the scope of this topic to the design workflow, and how to find inspiration. - Choosing a learning resource
My main learning resource will be this book: Steal Like An Artist — Austin Kleon. - Defining a project
As I just started a new company, which is going to work as a web agency, I am going to first design and then build its website. Moreover, I would like to create a web-design checklist that I would be able to use in all my projects.
The course / reading
Steal Like An Artist from Austin Kleon is a very short and easy to read book. It’s is very funny. The book is full of illustrations and drawing which makes the reading very interesting. Each chapter describes an advice or a concept to apply in your life or you work.
Each of this advices were either about the design workflow, about design hacks, or about life. I took note and try to apply the most valuables ones for myself and it was cool to see that I was already applying some others.
Design workflow
Austin Kleon didn’t describe a design workflow itself but only a set of advices that I compiled as “advices to include in my design workflow”
The very first and best advice brought by this book is to make a swipe file.
It’s basically a collection of arts, websites, music, photos, street art, anything that makes you feel something, anything that you like or anything that you can use as an inspiration later. The collection can be physical, in a notebook or digital, for example in Pinterest, Google Keep, Google Drive, Evernote…
Every time you need to start a project you can then go to this swipe file and select the resources that will inspire you, that’s why he calls it swipe file. A bit like tinder 😅.
The second most important advice is to copy and to learn by copying. I must emphasise that you are not supposed to make a dull copy without thinking, which is called plagiarism, but to “reverse engineer” the design, to look for the meaning behind it and to rebuild it under your own understanding. Moreover, they say that copy from one is plagiarism, copying from many sources is research. Which is a very positive way to see things. This is something that sounds obvious, but interesting to know and to do it consciously.
The last most important advice about the designing workflow is to stay away from the screen and to keep technologies for the final version of your design. It’s better to use real tools, like paper, and to use your body for the creative part of the work. It makes you feel that you are really creating and crafting. It is also something I always do in my design process.
Design hacks
What I selected as designs hacks are tips that will help you make a better design work but are not part of your design workflow, you don’t have to do them every time you have a new design project.
Every artist is following movements and some influencers, every artist has a mentor or even mentees. They somehow try to imitate, copy, and be as good as the other artist that influences them. It’s something that has been always there, and it is applicable to any artist. Why not to to you? This is why the book suggests to find 3 artists you love and to search everything about them. It can be painters, designers, entrepreneurs, musicians, even app makers! And if it’s possible you can find also what are their influencers and build a huge “genealogical tree” of influencers. By doing that you will not only know everything about your influencers but also about theirs and really build up your skills. For example in my case I have my favourites apps that I often check to see how they do things: Airbnb, Trainline, Google, …
Immature poets imitate; mature poets steal; bad poets deface what they take, and good poets make it into something better, or at least something different. The good poet welds his theft into a whole of feeling which is unique, utterly different from that from which it was torn; the bad poet throws it into something which has no cohesion. A good poet will usually borrow from authors remote in time, or alien in language, or diverse in interest. — T.S. Eliot
Another tip that the book suggests is to start producing things that you like, to create, and if possible, in a daily basis. Also, to take advantage by the fact that you are unknown, you are a beginner, no one will judge you, you can fail. Improve yourself and always share what you produce. It is something I try but it’s not easy to do it in a daily basis. That is why the author suggests to keep a calendar with 365 checkboxes that you check everyday if you produce something, that’s a nice trick!
Finally, he gives a very smart hack: create a file containing all the good feedback you got. If someday you need motivation just read it, it will give a boost 😉!
Life design
This book also contains a lot of life re-design, how to improve yourself and your life to keep healthy and to keep the good work going on! Some of them sound very basic and obvious but I noticed 2 that are quite interesting.
Stay surrounded by talent, because according to Jim Rohn — “You are always the average of the 5 people you spend the most time with.”. So your salary, your level, your productivity, is the average of these 5. It’s a very powerful statement, so depending of what you want, find the right people to work with, and don’t only think about physical proximity, it can work remotely also.
Log everyday in a notebook (or a virtual one), and answer this question: What is the best thing that happened today? it will help you remembering what you did everyday and also will help on focusing on the best things to keep the positivity and the motivation.
How I created my swipe file
From all the advices given by this book I found the “copy workflow” by creating the swipe file and using it every time you need the most interesting for me (and also taking different part of different project and understanding why).
That is why I will describe how I created my swipe file:
- I created a notebook in Evernote called Inspiration
- Since I started my web agency website project, I went into different sources to populate this swipe file (Dribbble, Awwwards, Google search)
- I searched there the keywords “agency”, “portfolio”, “minimalist agency” (minimalist because I love minimalist websites)
- Every time I found a design that I liked I added it to Evernote by copy pasting or using Evernote Clipper extension. Then I added the tags to know why I added this in a swipe file, for example: Agency, Web, Mobile, Colors, Gradient, Animations, Typography
- I continued also adding my big favorites websites with a good design like Airbnb, Spotify, Apple Music.
- To finish I just keep in mind that every time I find something beautiful instead of just forgetting about it I will put it in Evernote, or take a picture and put it there.
- Now my Swipe file is opened every time I start a new project and I can use it or repeat those previous steps to populate it before using it. Moreover I have some pictures from museums in google photos that I took before having this swipe file, I can also use the search to find them as inspiration.
If you don’t have any swipe file I definitely recommend you to create one as soon as you start a new project.
Now let’s see how to improve my web-design workflow using this swipe file.
The design checklist
I made this webdesign checklist based on what I usually do, some more researches, what I learnt from this book, and also my company website project. I tried to make it as generic as possible.
- Define the architecture of the information of your app / website (pure content)
- Collect inspiration (Dribbble, Awwwards, and favorites sites)
- Swipe your file to make a shortlist of the top 7
- Design wireframes (on paper)
- Collect feedbacks
- Design the website in grayscale(you can use your favorite design tool)
- Collect feedbacks
- Select 2 fonts
- Design the logo
- Define the color palette (it should fit the logo)
- Improve your design implementing the fonts, colors, and logo
- Collect feedbacks
- Define animations to implement (you can design them if they are complex using a software, otherwise just keep them in mind, or draw them on paper)
You can also find it in its latest version in my GitHub repository: https://github.com/sandoche/Webdesign-checklist
The reason why I decided to design first in grayscale is to focus more on the spacing and on the layout itself instead of trying out colors, read more about this here: https://medium.springboard.com/a-designers-guide-to-selecting-colors-for-your-product-9944756838d4
Let’s redesign my portfolio
My new company will be composed of two brands: the agency one called Snitco, and the event organizing one, called Sconférenciers. And we decided to start with the brand Snitco. That’s where I will focus here.
Our brand Snitco will provide different services from 3 categories: Creativity Workshops, Communication, Development and Design.
We don’t have anything built so we start from 0!
Defining the content
We first started defining the content in a hierachied way. I always do that now when creating a new app or website.
Here is how it looked: https://github.com/sandoche/Snitco-information-architecture-example (sorry I did my architecture in French 😇)
At the end the architecture evolves and you change it to make it fit perfectly with the design.
But basically it was 5 sections: header with unique value proposition, the projects, the services, the team and finally the footer.
Populating the swipe file & Selecting inspiration
The next step is to populate my Evernote swipe file, using the keywords Agency, Web, Mobile, Colors, Gradient, Animations, Typography mostly using Dribbble and Awwwards.
Once I felt that I collected enough data I made the following shortlist:
- https://dribbble.com/shots/3272390-HBK-Creative-Agency
- https://dribbble.com/shots/3638273-Creative-Design-Agency-Website/attachments/812598
- https://appico.com/ (animations, minimalism)
- https://bitesizeinc.com/home (animations, shapes)
- https://www.spotify.com/fr/ (colors, typography)
- http://wearecocoon.co.uk/ (minimalist)
- http://www.size.agency/ (simple content)
- http://www.revstudio.pl/ (minimalist, simple)
- https://www.packwire.com/ (animations, colors)
- https://revolut.com/ (simple, typography)
From that list I asked my team to vote for their favorite (the ones in bold) and tell me why. I used this information to use what works well in the different designs and build the grayscale mockup.
The grayscale mockup
I use Adobe Xd (beta), which is free, to build my mockup. I really tried to keep it minimalist but I also tried to define some animations to have a “wow effect” as the rest of the team wanted.
So the different elements I took from the previous design shortlist:
- the big header with the unique value proposition in bold
- the flat background
- the white spaces in the second part with the cards to describe each project
- the list of services displayed very simply, very clearly
- some appearing animation
- a blowing heart
I tried to combine all those different elements in a very harmonious way, plus I built other ones that go along and help us create our own identity. Also I wanted to use only 2 fonts, and a few font sizes to make it more simple.
I also used this mockup to try different fonts combinations and finally ended up with two Heebo and Noto mono.
Trying colors
In order to find colors I tried different resources for color palette:
- www.colorlisa.com — Colors palette extracted from masterpieces
- https://color.adobe.com/ — Adobe color CC, with a lot of palette you can just use the search and type a keyword
- http://colorhunt.co — Color hunt, similar that the previous, but with more trendy palettes
- http://www.rehabcenter.marketing/tintui/index.html — The most famous palette, Material design, Pantone, Twitter, Flat UI colors
I played with them I ended up with the following.
After talking with my mentor Vera and my team we decided to go on the Violet one for Snitco and maybe go on a more red one for the other brand Sconférenciers.
From that I made a palette and a short design guideline.
Creating a logo
In order to create the logo I first took a paper and tried to play with the letters of Snitco. Also I decided to put a dot at the end of “Snitco.” as part of the brand to make it look sharp, precise and classy. That is why I also played with the “.”
I then made a few with the computer.
We ended up with this one after discussing with the team. Which is made of the two pieces of the negative space that you find in “S” rotated and moved to make it as two wings.
Final design
Now I have the colors and the logo, I put it all together and readjusted the spaces and the sizes, here is what I finally ended up with.
I also created the illustrations based on the content of our projects for each little card.
Implementation
Once the design was validated by the team and my mentor I looked for the best technical solution to implement it. I decided to choose Jekyll with a internalisation plugin to have it in French and English.
I separated the concerns: content, html, style, javascript to make it as independent as possible.
The final result
Here is the final result 🙌 🙂: http://snit.co
Feel free to have a look, and all feedback is welcome!
Feedback from this learning month
What went well
- The reading
- Application of the reading
- The design process
- Cooperation with my team to make an identity that fits us all
- Communication with the mentor
- Timing — ended the 25th of July
- Usage of Adobe Xd
- The swipe file is amazing
- I am very proud of this final result
What to improve
- I started this topic while finishing the previous one
- I expected a bit more learning about design itself rather than the process or how to get inspiration
- Maybe I could have also learnt about color theory this month but the book about color took time to arrive
If you liked this post, please click the clap 👏button below a few times to show your support! Also, feel free to comment and give any kind of feedback. Don’t forget to follow me!
Want to see more articles like this one ? Support me on Patreon 🙌
