What's your (pre) web design process?

Web Design
#1

Hope you’re having an awesome day, everybody.

Looking for an advice regarding how to optimally structure the process of coming up with a full-fledged design for a web site (or a part of it) - starting from scratch.

The most recent (and one of the most thorough, IMHO) FreeCodeCamp video regarding WD, released on their YouTube channel (“How to Design a Website – A UX Wireframe Tutorial”) seems to mention quite a lot of things, but it doesn’t go all the way down to the actual structure of the content, though.

Thus, my question: how do you structure your web design? - and, perhaps more importantly, what do you do before you start designing for the web?

Following the tutorial, it seems that the logical algorithm to follow is:

  1. Define the site-map
  2. Choose which content goes where
  3. Create a low-fidelity prototype (wireframe)
  4. Come up with a basic gray layout to customize (with Figma, Adobe XD, etc.)
  5. Customize it with colors, fonts, images, text, shadows, animations, etc.
  6. Code it up in HTML, CSS, JS - using some CSS/JS frameworks (or not).

Is that how you’d do it? - or would you rather jump in straight into Bootstrap?

Any thought or advice would be appreciated, especially from those who’ve have a hands-on experience designing their own projects from scratch - I’d love to hear from you.

#2

No, I don’t follow those steps. I don’t typically work with Bootstrap either, but I have on occasion.

The first thing I do is really pin down the purpose of the website and what it is meant to accomplish, then I think through the problem of how best to structure the website to do these things.

It’s only after I’ve seriously thought through these issues that I’ll move onto a site map or wireframe (which I tend to treat as the same thing at first).

I never have bothered with a gray version of the site. I see no purpose in that at all and had never heard of doing so before. It sounds like a needless step to me.

I also have a tendency to jump right into the coding and using the code as my sketching tools rather than doing it separately. I’ll sometimes build quick prototypes in Photoshop because it’s so easy to make changes. I try to minimize that, though, since, again, it’s an extra step that I’ll need to redo in the code. I haven’t really used Sketch, XD or Figma much since, at least for me, Photoshop works pretty well.

Anyway, after building websites for the past 20-some years, I’m trying to avoid designing them. :wink:

1 Like
#6