10 tips for designing your own website (without having a breakdown)

Photo Jan 30, 1 44 54 AM.jpg

When I’m not writing books in the wee hours of the morning, I’m a web designer. Actually, I am a web designer most of the time. It’s been my full-time day job for more than five years (and most recently, I designed this, this, and this).

A few weeks ago, someone asked me the best way to go about building a new website. It’s a question I get a lot—with so many awesome platforms out there, it can be totally overwhelming for a beginner. It’s a lot to keep track of: figuring out branding; deciding whether to use a template, create your own, or tweak someone else’s; wireframing; copywriting; finding or shooting beautiful stock images; styling your pages; learning SEO… got a headache yet?

To help you kickstart your website design, I thought I’d walk you through the steps I take with all of my clients and share the best ways, in my opinion, to make sure you can make it through the whole process of designing a website yourself without having a breakdown.

1. ask yourself the hard questions.

source:  x

source: x

With these kinds of clients, it’s important that they know what makes them remarkable. So I ask them to tell me what they think is special about them. I genuinely want to know, and if you fall into this category, you will too, because people respond to passion, and if you’re not passionate about whatever it is you’re going to put on that shiny new website, nobody will be.

2. cut that sh*t down.

OMG GIRL, you brainstormed! You came up with a whole list of things that make you unique, and you’re so excited about all 500 of your ideas! You want to tell the entire world!

I’m thrilled for you. Really, I am. But I’m going to tell you right now, you’re going to need to cut that list down to, like, two things. Ideally one thing, if we’re being straight with each other (and I feel like we know each other pretty well now). So, what’s the stand-out? What’s the one message you want to communicate? I know, it’s hard. But think of it this way; if you were bombarded with twenty pop-up windows, you’d be pretty annoyed, right? You’d probably close them all without reading any of them, right? It’s the same feeling I get when I visit a website that shows me a million things I could do or read or watch, when I’m just looking to buy that shampoo that really like.

Your message is your one chance to grab people and say, HEY. This is why you should care. Your website is a reflection of your brand, and you want that brand to be a big, strong mature adult, not a confused toddler flailing its way through life.

3. make yo’self a mood board, baby.

Let’s be real, you’ve probably already done this, whether just in your mind or IRL. It’s almost always the first thing that my clients tell me, because chances are, they’ve seen some website online that made them think, “Oh my god, I love this. If I had a website, I’d do it exactly like this. Hey… maybe I should build myself a website.”

So now is the time to go back to that website that inspired you so much, the one with all the rad graphic design and the eye-catching animations! Break it down, figure out what it is about the site you like so much. Maybe it’s the color palette. Maybe it’s the photography or fonts used. Maybe it’s the way the single-page design looks so damn good on your phone, or how you feel like it’s completely intuitive to navigate.

Save all that inspo, baby! This is where you start to figure out the general vibe of your own website. You can use Pinterest or tools like Pinup to create mini-bulletin boards, complete with written notes to yourself. Check out my sample mood board below…

Super fun, right?!

Super fun, right?!

By the way, the reason we do all of the branding exercises before the mood board is so that we don’t get swept off our feet by other people’s brands. We love inspo around here, but before you get Pin-happy it’s important to hone in on your own identity first. You don’t want to accidentally regurgitate something that already exists.

4. phew. okay. who’s gonna see this.

Seriously, who’s going to see this? Or, more importantly, who do you want to see your website? There’s a saying in the marketing world that goes, if you cast a wide net, you’ll actually catch nothing; it means that if you don’t narrow down your audience, hoping that you’ll appeal to everyone, then you’re actually going to appeal to no one.

The most effective designers design for a specific audience. It’s likely that you’re going to end up appealing to a wider audience than you expected anyway. So go ahead, get really exclusive. This is a VIP party, so who’s there? What kind of person would you want to clone and have a thousand of, surfing your website? Think about who you’re trying to talk to.

5. it’s not what you can do for your website, but what your website can do for you. or something like that.

Once you figure out who’s going to be captured/stunned/dazed by the majesty of your website (I mean, in a perfect world), you should have a better idea of what they’re going to need to do—i.e., the functionalities of your site. Are you an online retailer? Then your site’s probs going to need a shopping cart, huh. Are you a freelance graphic designer trying to get work? You’re gonna want a contact form for potential clients to fill out.

Look, I get it. We’re on step five, and we haven’t even picked a platform to host your website yet. But all of this planning is just going to make your life easier. I can’t stress it enough. If you go with Platform X, pay $353,982.98/year for the subscription, and then realize that you need to be able to blog and the platform you just paid for isn’t actually very good for blogging… you’re gonna be pissed.

Been there, done that. So listen to my voice. Front-load your planning.

6. we did it! you’re ready! now it’s time to pick your platform.

There are so many to choose from.

Wordpress is a free-to-use content management system (CMS) and it’s been around for a long-ass time, so there are hundreds of pre-created templates and plug-ins to choose from. Basically, Wordpress is a beast in terms of customization—your options are endless. You can also choose a very simple template and have a site up and running within minutes.

Squarespace is paid, but the templates are gorgeous and clean (in my opinion, worth it!). Even though your styling options are a bit more restricted normally, you can enter Developer Mode to tweak the code itself (though if you do this, realize that you’ll lose the option of asking the Squarespace support staff to help you with any design-related issues—they will wash their hands of you).

Wix is a mix of the two, offering both a free version for basic sites and a paid version for further customization. Wix also gives you the option of working within a template or building your own, so if you want flexibility, Wix is your platform.

Generally I prefer Squarespace for my design projects, but I have used all three platforms for various organizations and purposes. The choice comes down to what you want your site to do and how much time you’re willing to invest in it.

7. sketch out a wireframe.

Don’t freak out. A wireframe is just an outline. It’s the skeleton of your site. When I design for clients, I tend to spend a lot of time on this step, because it is so valuable for the client to get a visual of their site before I even start design.

For a first-time designer, I’d say start by making a list of the pages you’ll need on your website (for example: Shop, About, Blog, Contact, FAQ, etc.). Then do a little art! Draw your navigational menu. What do you want up there? Maybe you just want your Blog and your Contact nav buttons to live up at the top of the website, and everything else you want to put in your footer. OR maybe you want to combine a bunch of pages on a single-page design divided up with anchor links.

The wireframe is where you figure out your website’s flow. It’s also where you start to really consider how easy it will be for a first-time visitor to find things on your website. All important things to think about.

P.S. - if you REALLY want to go for it in this stage, try out Justinmind for professional-grade prototyping.

You don’t have to get this fancy with your wireframes. A doodle on a piece of paper works great!

You don’t have to get this fancy with your wireframes. A doodle on a piece of paper works great!

8. pick a template or go rogue.

Going rogue is fun, but if I were you, I’d start with a template. Templates are cool. Designing within boundaries lets you get creative. And with a platform like Squarespace or Wordpress, you have a lot of beautiful template options.

My advice? Pick one that has all the functionalities you need (remember planning for that? Oh yeah… it was important after all). You can style it to match your ‘gram-worthy aesthetic later. Just make sure first that you can create a tiered footer or have a secondary navigation or whatever your little heart desires. Don’t make the mistake of picking a template, getting 90% through formatting all of your pages, and then realizing that you can’t embed forms or some ridiculous crap like that. You gonna be mad.

Function over fashion, y’all.

9. put that mood board to good use and format dem pages.

You made a mood board. Now let it werk.

It’s time to make some decisions, so formalize that color palette, girl. You know what you like. Pick your fonts (need some help with that? Try Fontpair.co) and style your buttons. This is the fun part. Get creative and start putting everything in its place.

Write copy that makes you feel when you read it (I’ll do a separate blog post on compelling copywriting soon). Fill out your pages with beautiful photography, or choose stock photos on Unsplash, a community of professional photographers who share their work for free. Pro-tip: make sure you credit the artist appropriately if you do use stock imagery!

10. revel.

Designing a website is no easy feat. It takes time and energy and commitment, and by the time you launch, you might have a few more gray hairs than when you started. But it’s worth it. So don’t forget to bask in the glory of a fresh new site! Enjoying the fruits of your labor is just as important as every step of the planning process.

source:  x

source: x

you’re such a pro now. i’m so proud of us, tbh.

check out more of my work here! and leave me a comment if you want to learn more about anything i mentioned above.