How to Design Your Own Website Without Being a Designer
So you need a website. I’m guessing you have a new business idea, or you just want to show off some of the photos you took on your last vacation. Sure, you could just slap them onto Facebook and call it a day (and if that would suffice, it’s best to take that route), but you need a presentation that feels real and entices trust in the visitors. There’s just one little problem.
You don’t have bazillions of dollars to invest in web design.
That’s ok though, we got you covered! In this guest post written by Heidi Pungartnik from Design for Founders we’ll discover three different approaches you can take to get you quickly and cheaply from no website to a website. If you want to get more tips on how to cheat your way to a professional-looking design without being a designer, be sure to sign up to the launch list of her upcoming book.
The first step when you’re starting to build a website is not starting to build a website. Seriously! You need a plan first.
Start by asking these very crucial questions:
- What is the purpose / goal of this website?
- Who will be visiting the website?
- Where will the traffic come from?
You may think that these questions are overkill for your particular website. You probably just want to get started as soon as possible and get it over with. But taking a few extra moments to really consider those questions can save you from a lot of extra work down the road.
First, you need to know what the purpose of your site is. What do you want visitors to do? Contact you? Purchase a product? Get an impression that you or your product are trustworthy? Along with this question comes the “who” question. Try to speculate who will be visiting the website. Will it be your future employers or just random stay-at-home dads? Answering this question will help you adjust your content strategy and design to fit your audience.
The last question is where the traffic will come from. Many first-time website owners expect traffic to just flow in without any work. Give this topic some thought. Not only will this help you promote the website, but also give you a chance to reconsider the design.
And now on to how you can actually design your website.
Hire a Designer
First, a very obvious way of getting a website designed without being a designer is obviously to have someone else do it. This topic is very well covered by many writers, so I don’t want to go into too much detail.
The workflow is basically:
- You prepare the content and write specs / draw a wireframe,
- designer takes your branding guide and creates something beautiful from it,
- you send it to a front-end developer and get back finished code, ready for upload onto your server.
If you have problems finding the perfect designer, utilizing services like Upwork, Freelancer, and Fiverr has worked for some people.
The downside of this method is that it can end up being quite expensive, especially when you hire a great designer. You’re also left with all the hassle of uploading the files (which is not hard, but still something to consider).
Learn Just Enough Design to DIY
Another, much cheaper option is to DIY it. Before your website turns into a D-I-Why? kind of project, it’s a good idea to check out a few web design tutorials and blog posts on how to fix common web design mistakes.
Then, after drawing a few wireframes on how you’d want your content to be laid out, it’s time to flesh out the hi-fidelity mockup. For this, you can use apps such as Photoshop or Sketch, but I’d recommend you go with the latter. The reason I think Sketch is particularly helpful for beginner designers is in how consistent you can keep your interface without much effort. Once you save fonts and colours into reusable styles, you can simple apply them wherever in your document, which limits you to only a few fonts and keeps everything look consistent.
Expect for this part to take a while, especially if you don’t have any experience with web design. Here are a few of my pointers:
- Be consistent. Make use of Sketch’s text and shared styles, as well as symbols to help you with this part. You don’t need more than 2-3 different fonts, and 2 different accent colours.
- Use a grid system. Sketch has one built-in, and you can show it by looking under View -> Layout Settings. Align all the elements to the grid.
- Leave some space. In my opinion, leaving more whitespace always produces better results than leaving less of it.
- Copy what other websites are doing. It can be a great idea to try to draw inspiration from other websites you like. Just make sure not to go overboard with this and recreate the entire website!
Use a Template
If you aren’t confident enough in your design abilities, you piggyback off of an existing design. The benefit of this approach is that it doesn’t bring any additional costs after purchasing the template to develop the website. The downside of this approach is that your website will probably end up looking like many others on the web. There are measures you can take to customize a template to your branding and liking, but the underlying design will still be obvious.
You can opt for a number of systems to run a template. The most popular is WordPress, which is open-source and free, as long as you have your own server. Then there are Shopify, SquareSpace (ecommerce-focused) and Tumblr (more blogging-focused), as well as Ghost, Drupal, and a number of others. WordPress themes typically run for about $40, but can go as high as $200 in some cases. This is definitely a good option for anyone with a good handle over the technical aspect of things.
A middle-way between creating your own design and using a generic coded template is to find a designed template’s (normally psd or sketch) source file and modify it to your liking. This way, you’ll have a much greater control over what the end result will be like, while avoiding the hassle of designing the site from scratch. After you’re done, simply send it to HTML conversion and you have a brand new site!
Obviously, these three ways of creating a website are not going to give you the result of a professional team working on your website, but it’ll surely move you in the right direction. What are your tips for building websites cheaply? Share in the comments!