On Design: Before You Dive In
Tags: design, css, webdev, productivity
Published: 2021-09-08 19:19:46

An important part of *design* is knowing your scope, your limits, and your possibilities. You can't paint a Picasso with a toothbrush; unless of course, you're specially gifted, skilled, or talented enough for that specific task. But you get the point. Similarly, no captain an aircraft or an ocean vessel takes off on their journey without first assessing their resources and taking consideration of the journey.

The same applies to design in a broader sense, but especially so when it comes to web design. Before you jump into your design process, assess the landscape. It's more than just knowing, in a basic sense, what you want to create. *How* are you planning to get there? What are you going to need? How long do you expect to take?

![A screenshot of the tweet below](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vyd2w9iydjvzfx5hbyoo.png)
https://twitter.com/rolandixor/status/1433952390365986816

Personally, I struggled with this issue for years. Give me a word, and I'll write you a story. Give me a concept, and I'll build you a city. This is a great gift to have, but even the greatest gifts need *discipline*. You can be gifted, talented, and unskilled, and a lack of planning *will* engender and create a lack of skill. So how do you overcome it?

You're not going to get very far in this process if you don't know what it is you're trying to polish, so the first thing you need to do is to practice the process on yourself.

## 1st Assess Your Gifts - What are you good at?
![Why Yes, I Am The Button Master!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/34omqnbahffememk8pij.png)

Once you can identify your gift, you can identify your niche. Are you good at designing buttons? Well, now we know what you *don't* need to spend time fixing.

## 2nd Assess Your Flaws - What do you suck at?
![Just Use A Button For Everything!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy0sp0l8xxu3aev0rrgq.png)

Where you suck is where you're going to need to put your efforts at this stage. *You don't have to be good at everything,* BUT, **no one *sucks* at everything, either.** Are you good at *choosing* which buttons you need to use?

Asking yourself question like these can help you figure out where your flaws lie, even if they're not immediately identifiable. You may also find that what you think you're terrible at, is actually just an area where you need some practice.

## 3rd Start From The Bottom

![Oh you think that's bad? Wait till you see my new stuff!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8zdl6difiz30muvs26rv.png)

Do you have some old projects laying around? Can you organize your projects into a roughly chronological list? This is a great way to identify your problem areas, as well as your strengths. You'll notice that there are certain things which remain consistent in your designs (results), and with some self-examination, you should be able to identify the areas of your design process that lead to these consistencies, good or bad.

Another thing you can identify, is where there are "bottlenecks" in your process. What stumps you every time? Where do you turn for inspiration, and when? What makes you throw in the towel and start over?

Once you can begin to make sense of your design process, you're ready to start looking at taking the next step: implementing what we started with, going forward.

## 4th Start Walking Again - With Care

![I'm READY, For A Change](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sis14l0u7j5ngorxgmcg.png)

I'm not one to tell you to get up and start running. That's likely to get you on your face with the quickness. Instead, I suggest starting with small changes to your design process, and building from there. As I always say when teaching design principles to others: "Stack Simplicity."

To give an example of how this can work in the real world, let's say that you want to design a new web page/site, but normally don't use mock-ups; you dive right in. Well, this time around, design a mock-up. It doesn't need to a be fancy. You can even draw it on a piece of paper.

### What do you gain from this?

- You get an idea of what elements your web page is going to require, so you can begin thinking in more semantic terms.
- Implementation of the design is likely faster, and easier, because you already have a vision to build toward.
- You're forced to slow down and think about your design choices more carefully.
- Mistakes are more easily caught and avoided.

### Going forward, how I build on this?

- Start plotting out possible interactions your end-users may have with your design.
- Try changing something around, maybe the layout or colours of your design. Does it still work? **(NB: It doesn't have to! It's all about identifying your parameters, including boundaries.)**
- Time yourself doing iterations of the same (or similar) project(s). Spending less time may mean you're becoming more efficient, but spending more time may mean you're cutting fewer corners. Matching time spent with differing results can help you to identify your strengths and weakness in this way.
- Keep track of your overall mental health. Are the changes you're making in your pre-design approach leading to a better experience overall? Are you feeling more accomplished when a project is completed? Or are you feeling more drained? Do you maybe need to delegate tasks? Can you? These are good questions to ask yourself in self-assessment as you move forward.

## 5th And Finally - Look Back

![Two snails, barely moving, saying "We've come a mighty long way!" "Yep! 2mm!"](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khiz258xd0o303ir6klg.png)

Given some time to improve your process(es), take a look back at your work. See all those improvements? Those little successes?

**CELEBRATE THEM!**

Now use that energy to press forward, and as you do, keep checking yourself for improvements. They've probably always been there, but now that you know, you can remember to look for them. Just remember to be honest enough with yourself to also notice where you can do better, because you ***can*** do better, and if you keep walking with an eye toward self-assessment of your design process, ***you will***.

**You got this!**