Hey coders! Hope it is all going well 
First of all, if you have not read the introduction post, I would suggest reading here as you would have a better understanding of what this is all about.
This topic will be focusing on what are the first steps when web designers are given a project. You may be feeling disappointed when you get to read this topic because you will be questioning where is the colour theory or the fundamentals of typography but without this topic, it will be extremely hard to design a layout effectively. Think of it as it is will be hard to create your own pizza with different kind of lovely toppings without creating the dough base first.
Originally, I was going to create one whole post of the first steps in the process, however, when I have got to the brainstorming and draft ideas process I realised it would not work to teach you this at this stage in an effective way.
Normally, it is taught this way when you get to learn the principles of (any) designs in other resources, but I personally do not see the point as not everyone understands how the colours represent mood and personality and typography represent certain styles, etc. Therefore, the second part will be done when you have knowledge of the web design principles. Anyway, let’s begin!
Step 001: Getting to know the Client
To create a productive design layout and apply it to your functional website is actually to research and gather a decent amount of information about your client. This is important because, in our situation, we will need to create a branding identity that reflects your client’s project. After all, if we did a web design project on Superman, I am pretty much sure he will not appreciate his website to be covered in the baby pink colour background with floral print and unicorns across the page!
First thing, the web designer gets to meet the client to discuss the process of building a website for them. The discussion involves getting to know the client and their project, which they ask a stack of questions and note down all the answers. The questions are normally about both the client themselves and whatever their project is. The project could be a business company, an organisation or even just for themselves or their idol that they love.
The web designer gets to know the client further by going to their business/organisation/home property to get the feel of the environment and test their products inside and out, however in our case as we are only studying and not actually working in the professional environment, the process of the latter will be excluded from this topic. I an stating this because this is what normally happens in the initial process of the professional workflow and if you somehow can do that and you want to, go for it.
Also, note that we also do not have a real client with us when we are doing projects such as the Tribute page or the Landing page so, how can this be done?
The answer is to try to create a fictional role-play involving the client. There are different ways for doing this.
A project for a client who exist(ed) in real life
if you were doing a Tribute page and you have chosen Steve Jobs to do a tribute on, then Steve Jobs is your client in the fictional role-play.
A Project for a client that does not exist
For example, if you are creating a website of a fictional business that sells products, and the owner does not exist, you can also do a role-play. Create a fictional character that will be your client, define their own personality and a basic profile about them such as age group, gender, name etc (the profile are optional but it may help with the project). You will also create a client’s project and its vision. By doing this approach, it will help you to have a better structure of design planning and strategy.
Regardless of how you are doing the role-play
As you are not able to get direct answers from them to our questions, this is where we will have to do our own research to find those answers (luckily for us, the research is pretty much done online).
The list of questions (that web designers ask) is normally long and have their own set or style of asking. This is why I will add a list of the basic, yet vital questions below and instructions on creating a template file.
List of questions to ask
-
Tell me about yourself and what do you do
-
If the project is representing yourself, describe me your personality
-
What is your project/organisation is called?
-
What is your project/organisation about and what does it do?
-
goals for the project/organisation to become successful?
-
Does your project/organisation have a tagline/strapline?
-
Does your project/organisation have a logo or branding identity?
What is your aim to achieve out of designing the website? -
What information and content would be provided to go the website?
-
Who is the project/organisation’s target audience?
-
What do they know about your project/organisation?
-
List all the things that you want the targeted audience to think of when they see your company/organisation?
-
Who are the competitiors to your project/organisation?
-
Do the competitors have their own website and branding?
-
How do the competitors market themselves (especially online)?
-
Is there extra information to add?
Creating a Questionaire template file
-
Create a text file and add these question as subheadings (meaning they should be text-size bigger and bold)
-
Leave a big gap between each question where it is enough space to add the written answers
-
print them and use them whenever it is needed. Also, it is up to you to change the wording of the question or even add your own as desired.
It will be handy to have a template file because you would be able to re-use it in the future. As I have stressed this is a basic Questionaire as it is designed for learning and is not a professional standard. If you do want to create a professional template Questionaire but do not know what questions to add, I would check out this PDF form of the Questionaire designed by Kentley Design, who is a graphic designer but the format of the questions are pretty much similar for web designers.
I will do a case example below and add three (in no order) questions. This is where you have a better understanding of what the answers could be.
Case Example 001
Let’s use the Tribute project as a case example and our tribute will be based on Steve Jobs (our client). Of course, you can pick your own to follow the process below.
Web designers would normally ask the client: Tell me about yourself and what you do
We ask in our mind: Who is the Client and what does s/he do?
-
Steve Jobs was an inventor who co-founded one of the biggest companies, Apple.
-
His role was to create and design technology products. He was well known for creating the iPod and iPad.
-
He was one of the most influential figure globally and has a net worth of over $10 billion.
Web designers would normally ask the client: If the project is about yourself, describe me your personality
We ask in our mind: How you would describe their personality?
Considering I cannot ask the client this question directly, this is where we will need to head to online and google “What was Steve Jobs’ personality?"
TIP
Be careful how you find the resources to answer your questions as not all resources are reliable and may have a biased opinion.
I had to gather a couple of articles as most was quite heavily opinionated and biased. Because of that, I also decided to find a biography online to know more about his life.
Coming to the conclusion of what I have found all together:
-
I learned that Steve Jobs was a strong, firm and powerful character with confidence.
-
It is known that he was not a person to be considered as open and friendly.
-
Jobs was also a perfectionist and like things to be organised that no mistakes can be made.
-
I have noticed (from images of Steve Jobs) that he dressed very simple but he was also an outspoken person, and from that observation of mine, there is a vibe of ying and yang about him.
Web designers would normally ask the client: For your website, who would be your target audience?
We ask in our mind: Who is the target audience to visit the client’s website?
-
Technology lovers
-
Steve Jobs’ fans
-
business entrepreneurs
-
The age group is wide, but it is more likely to attract the younger age group because the interest expressed in technology is higher in the younger generation in comparison to the older generation.
-
Also, Steve Jobs is considered to be role model in the business world, attracting the young entrepreneurs who have just started out and aims to follow his steps of success.
This is one of the most important questions to ask and I will stress further details in the advice about branding section below.
What if the client is you?
This would be the case where you are doing your portfolio, setting up your own blogging site, or creating your own business…or even doing a fan page of yourself lol (who knows, out of the whole world population, there must be one that is really feeling it 
).
This would mean going through the same process and use the same questions (if it is appropriate), only you would have to feel like you are in an interview and being asked by someone else.
What if the client is made up and I already define a profile for him/her?
I would still write down all the answers, because it is about being in a role-play, making it feel like it is a real-life situation, this way it enables you to problem-solve in the most productive way.
When you have all the answers….Start Highlighting!
Start looking back at all of your answers and highlight the keywords that were mentioned because these words will be used in the brainstorming process (in The First Steps of the Process pt.2). Here is an image of what I have highlighted using the case example of Steve Jobs Tribute page.
Note
If you cannot read my writing (which is understandable lol), I will list the highlighted keywords:- Apple
- technology
- most influential figure globally
- $10 Billions
- Strong
- Firm
- Powerful
- Confidence
- NOT open and friendly
- Perfectionist
- Organised
- Simple
- Outspoken
- Ying & Yang
- Business
- Younger age group
High-Priority Advice: The Importance of Branding Identity
The reason I considered this to be so important because it is where many creators (both designers and non-designers) tend to overlook on producing branding in an appropriate manner, and I was definitely one of them when I first start learning!
Designers have been taught to create their own self-branding that reflect themselves, but it has never been thought how their self-branding could affect their desired target audience and market.
To explain the concept better, when you are creating your portfolio, you will need to create a branding that reflects you, BUT you will also need to ensure that it will also appeal to your desired target audience too.
For example, if you personally like luxurious colours and typography and you create your portfolio website that consists of elements applied with luxury styling, you will likely to be attracting web companies (both design and development) that aim to create websites for clients of high-end markets. This also goes the same for freelancers and self-employed web designer/developer, only you will be attracting clients of high-end markets. If you wanted to be hired by a company where they focus on creating websites that are filled with comical, playful, and child-like styles, you may struggle.
TIP
When you are in this situation, the best approach to solve this is to try and combine the styles that reflect you and styles that will appeal to your target audience, this way it will show that you are trying to be adaptable to different styles and methods.Practical Exercise
Considering this is only the first part of the first steps, it will be a small exercise.
-
Using the list of question provided above, do a role-play and create or choose a character that will be your client
-
Do research to find information about your client and write down all the answers into the template file. By doing this, you will be problem-solving and researching skills
-
Highlight all the keywords that will be vital, especially in the brainstorming process
Conclusion
So far, we have covered the topic where it may not covered the design aspect but it is considered a vital process in the web designer workflow. Plus, asking (yourself and others) so many questions will actually get your mind flowing and make it easier for you to problem-solve and that can lead you to having many new ideas popping up in your mind.
For the next topic, we will dive into the principles and theory of colour and explore how:
- colours represent certain mood and personality
- the relationship of colours working together in harmony
- to create a colour palette
- I found my own structure of creating my own colour palette
There could be more, but this is enough for you to get an idea of what will be in the next topic. If there are any questions you would like to ask, post a reply below. If I do not respond right away, please do not be concerned as I will eventually back to you.
Thank you for taking the time to read and have a good week coders! 
Handy Tools
Stylebot (Chrome extension tool)
Extra Readings
The right way to brand yourself as a designer*
*This is actually designed for graphic designers. I posted this because some of the concepts does relate to the principles of web design and it is a chance for you to see how designers mentally think and design when it comes to self-branding.
**I actually a have not read this book, however, I have read the same author’s book - Know Your Onions Graphic Design and I did find it quite helpful, especially for beginners. So, I have my faith that this will also be a good read too. If any of you happens to read it, please let me know your thoughts.
