Web Design 101: Thinking Like a Web Designer

think like a web designer
geralt / Pixabay / CC0 1.0
Think like a Web Designer: Beginner’s Guide

There are a variety of ways to go about starting to design a website. Teachers and mentors either in school, via articles or those you know that are web designers, can teach you “their way” or their proposed “best way” of going about just that; however, the “best way” is the way that is good for you. But, to find that way, you must first begin to think like a web designer!

Thinking Like a Web Designer

Thinking like a web designer is a vital part of the design process. It is what will help guide you through the course of creating a website and, inevitably, producing a successful and effective website! You can think of it in the process of steps.

The first step to designing a website is gathering information, the second step is research, the third step is planning.

Unfortunately, most of us want to start at the “planning” step. Don’t! Before you start planning what colors to use or where to put your navigation, you first must know as many intricate details you can of what your website is.

With this being said, I can give you a few helpful questions to ask yourself before starting to design a website to start your “gathering information” process:

  • Who is this site for? What kind of person/business are they?
  • What is this person’s/business’ need for a website?
  • What is their goal for the site?
  • Are they trying to sell a product or a service? If so, what?
  • How do they want to appear to their clients and competitors?

You also could think about it like unlocking levels to a video game. Once you answer one question, it will lead you to another question you can answer.

The more in-depth you go, the better idea of what type of website you need to create as well as things such as what colors you could use will become apparent to you.

The “Thinking Like a Web Designer” Exercise

For the purpose of this exercise, let’s say our client is a small business owner named Shirley that owns a small jewelry shop. She doesn’t have a pre-existing website and gives you a funny look when you ask if she has a “brand,” but to our avail, she does have a logo!

So, before we continue, let’s answer the questions above for our small business owner, “Shirley.”

  • “Shirley,” owner of “Jewelry Shoppe,” a small business on the main street in downtown.
  • To promote the location, information and products her business has to offer.
  • To draw in more customers and allow her products to be viewed online to a wider array of people.
  • Yes, she is trying to sell rings, necklaces, and pendants.
  • She wants the website to be classy.

So, knowing these things, sit here and ponder for a moment: what is this information telling you about what type of website she needs? Are you getting any pictures of what this site could look like? What about the kind of information you’re going to have to put onto the website?

What you might be sitting here grasping at is the “classy” website part. Stop! There is a lot more information found here in these answers that you can use.

If you’re sitting here saying: “Thanks, Shirley. That’s all a bunch of general information that doesn’t help me at all. I still have no idea where to go with this website!”, now is the time to start teaching your brain to read and think like a designer!

This information we have here, now, actually gives us insight on a few things that this website will be and helps open the doors to our next questions! I’ll list a few bits of information we have gotten by answering those questions:

  • Shirley is a small business owner. In a general sense, you can then deduce how much designing is going to need to be done here. Because it’s a small business, she probably won’t care to have the ability to allow website visitors to buy her products online; she’ll probably just tell you it’s okay to list her phone number so they can call in for more information.

She’ll also probably only want a few of her products listed instead of listing every single product on her shelf. This means you won’t have to do much extra designing; instead, you’ll probably only have to design a home page and an informational layout, and even those two layouts won’t have much of a difference to them.

It also means, if you’re coding this website as well, you’ll only have to worry about coding around 3 – 7 pages.

  • By answering question number two, you know some of the contents that need to be on the website, such as her business address, phone number, a “general information” paragraph about her and her business and a list of her products.

This is an example of “unlocking levels”, because after deciding this, you need to decide what pages you need to have to place this information on.

  • Deducing that Shirley wants a “classy” website can be done in a few different ways; however, first and foremost, you should always ask the client what they want!

If they say “I don’t know,” or ask “What do you think is best,” which often they will, taking a look at their products and the location and layout of their business are very helpful! For example, what kind of rings or necklaces is Shirley selling? Are they Celtic or wedding rings?

Knowing what type of website she wants or would best suit her, if deduced by her products and qualities of her establishment, is what will lead to the research step.

(Note: You may have noticed there were quite a few “probably‘s” listed here. If you know about a client before your first meeting with them, then this is when you should start asking yourself these questions.

If you already know she’s a small business owner before the first consultant meeting, you can deduce those things from that general bit of information.

Of course, when you speak with her about the website is when you should get the concrete information on those “probabilities.”)

What to look for in these answers

It is important to determine “how much” designing you’re going to need to do. That is because your client or the company you are working for is going to want a set time on when they can see some progress.

When designing a website, time yourself on exactly how long it takes you. You’ll need to do this a few times to get a “general” idea of how long it might take. Always give yourself a few extra days in the estimated time you give them.

If you “get done early” it will look better on you, not to mention, you never know when something is going to come up that takes time away from designing the website, that you hadn’t planned for!

Determining what information needs to be on a site will help you determine how much “real estate space” you need for all of the information. That, in essence, “unlocks” many other questions you need to ask yourself:

  • “What information is important enough to put on the home page?”
  • “What is the best way to divide this information up on the home page? Horizontally or vertically?”
  • “Should this information have a supporting image on the home page or the additional pages?”
  • “Do I need separate pages dedicated to this information or can it be placed all on one page?”

Finally, knowing Shirley wants a “classy” website helps in deciding what “style” or “theme” to go for. If you’re still having a hard time in determining what exactly a “classy jewelry website” would be, that’s okay! That would be one of the things that bring us to our research step.


Gathering information on your project website’s brand, needs, and the information that has to be found somewhere on this site is one of the most crucial steps in design. Those five key questions are a good starting point for finding this information and then building on it; however, they are not the only questions you can ask!

As you progress, you will find your own issues and build and “unlock” other matters through those, as well.

Try going back to those five questions and doing another exercise on a different hypothetical company. What would be a hard company or individual for you to design for? Before you move onto the “research” article, concoct some of your own questions you could ask yourself to get the information you need to start designing a website!

Norman Anthony Balberan

Anything out of the ordinary (?) Utopian dream, crashed and merged with unstable consequences causing mayhem...

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.