Any time I’m starting a new website design, it can feel like a bit of a blank canvas (probably because it is 😅).
Where do I start? How do I know what to put first?
It can be pretty intimidating, but there’s a process I’ve found that helps get the ball rolling.
First, I’m always identifying the core global elements — specifically the color palette, the typography system, and my button styles.
These three elements help establish a base point for the brand so that you don’t have to think about those things on the fly.
From there, I then tackle the next set of global elements: the header and footer.
Typically, every header needs 3 main pieces to it: the logo, navigation links, and any CTAs.
At this point, I’ve already identified the sitemap, so I know the overall structure of the navigation links required.
Once I’ve dialed that in, and laid out the footer, I now have several pieces in place ready for me to start on the Homepage.
- Color palette ✅
- Typography system ✅
- Button styles ✅
- Header / footer ✅
The next step to move forward is typically guided by the website copy and any creative inspiration I’ve done. I always prefer to have the website copy first, and design second, this way you can lay out the content how it will actually be (and not just for placeholder).
By looking at the copy, and having my inspiration of ideas and layouts, I can begin designing the homepage. A lot of the time I have ideas flowing already, but if not, I refer back to the industry research — what are others doing in this space successfully? What ideas can it give me to help inspire (but not copy)?
Now I’ll be honest, the creative process is never cut and dry — I’ll often be half way down a homepage design, and get a spark of an idea, so I duplicate the Figma frame and start a new iteration.
I’ve always found that exploring those spur of the moment ideas are helpful — many times they don’t work out, but sometimes they do. At least I’ll know I tried and didn’t like it, versus never attempting it to begin with.
Design to Dollars Takeaway
Lock in your global elements before you start designing. A solid foundation is what gives you the freedom to chase a spontaneous idea without losing the plot.
