The Basic Principles of Web Design: The First Steps of the Process pt.1

The Basic Principles of Web Design: The First Steps of the Process pt.1
0

Hey coders! Hope it is all going well :slightly_smiling_face:

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

  1. Create a text file and add these question as subheadings (meaning they should be text-size bigger and bold)

  2. Leave a big gap between each question where it is enough space to add the written answers

  3. 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 :wink:).

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.

  1. Using the list of question provided above, do a role-play and create or choose a character that will be your client

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

  3. 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! :slight_smile:

Handy Tools

Stylebot (Chrome extension tool)

Extra Readings

The right way to brand yourself as a designer*

Know Your Onions Web Design**

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

15 Likes

Yup. Deigning for the person you are doing is very important.
I thought of doing a tribute page for myself, but that would’ve been ridiculous.

self-tribute template:
fill out the stuff
Tribute to ME
I am the most awesome dude in my house…

  • Born ? / ? / ?
  • Died ? / ? / ?
  • …
1 Like

Well, maybe there is nothing with a tribute on yourself (especially if you are the most awesome dude in household, which I am sure you are), it is HOW you portray the tribute to yourself :slight_smile:

1 Like

@Madalena.design
Your first topic is really educative and interesting one. I have been trying to understand the best way to deal with client at a professional level.
In fact what I learnt is nothing difference. The first approach is pretty much simple - Try to know more about the client and her business. Some people call this first and yet vital phase: “the discovery phase”. This I think will help serve as a guide, not only this - but help to avoid wastage of time on doing what is not interesting to the client.
Some of us here are willing to become freelancer (Pls we cannot afford to miss this step). In fact, this I think is not limited to web design but also logo/graphic design work.

Great work to our mentor.

I have been trying to download the book: know your onions, few hours ago, but all to no avail.

1 Like

First of all, thank you so much for your time to comment. I also appreciate that you have find to be educative as well as relieved that you can see why this is actually important in the design process, especially at the professional standards.

You are absolutely spot on. It is no good to be designing a product for a client when a) you have not got to know the client (some may feel underappreciated from that) b) the design may not be what the client wanted (and some may take it to offence that you, as a designer, assume the design reflects the client themselves)

By doing them two, it could affect your reputation as both freelancer web designer or developer.

By the way, are you downloading the book as a PDF or EPUB format???

I try downloading PDF format. I think I do enjoy it.

It is harder to find a copy in a ebook format, since the publisher do not provide it, which is a huge shame for e-readers.

If I can find the contact details of the publisher, I will try to get in touch with them and feedback a suggestion to do it in ebook format. (of course we will have to pay for it).

Alright, thanks a lot.

1 Like

You are welcome :slight_smile:

It might be funny though, I already laughed :rofl:

1 Like

I like to see one of yourself though! It is definitely going to be an interesting one :stuck_out_tongue:

1 Like

Holy moly, what a post!

I’m gonna have to bookmark this for later. Thanks for sharing!

2 Likes

You are welcome! I hope it will be a good read for you and if you have any questions or feedback, it would be great to hear :slight_smile:

I do agree it is a bit long! So if any future topics can be cut into smaller chunks then I will take that approach

The length is fine. It’s good to have detailed posts from time to time, especially on a topic like this that people ask about all the time.

I hope you’re considering putting this series on a blog? It’s the sort of material that’d be great for raising your profile and demonstrating your expertise!

Looking forward to the next instalments.

2 Likes

yeah. I know. I’m just kidding.

1 Like

IThank you for the suggestion because it makes me feel better the more hear it from everyone suggesting the same. (Meaning my writing style can’t be that bad haha).

But, yes I am considering and may plan to start doing it in the near future. I was planning to publish my articles via the platform, Medium, however, that was until I heard the news of what they started doing.

So, now I will have to find a different platform (if you know any good ones, it would be great to hear!) :slight_smile:

Until then, thank you for checking this out!

Aw, do not listen to @Steffan153! As much he has been helpful at times, he has gotten a bit cheeky… :smirk_cat:

But seriously, creating a self tribute page in the attitude of the tongue-in-cheek approach will actually be a good fun experience. :slight_smile:

1 Like

And there you go, folks! I rest my case :grin:

1 Like

Look into the freecodecamp.org/news platform.

There is a forum post somewhere about signing up as an author for it.

1 Like

This is a very solid and helpful roundup of everything one should keep in mind when first getting in touch with a client. Thank you for consolidating the nitty-gritty of this process. I think it’s an excellent advice to imagine a fictive client if you’re still at the beginning of your career and therefore lack real clients.

I especially liked the idea to regard yourself as a (hopefully nice:slightly_smiling_face:) client. That is really a thought-provoking impulse I hadn’t heard about before.

Also, the list of questions to ask is very useful in order to set up a checklist to find out what the client has in mind. My experience is that they often don’t have precise ideas what they want to achieve with a new website, thus not always being able to answer these questions.

1 Like