As I am currently working away on redesigning my website, I thought it seemed a good time to share the process of designing a business website, and the things you need to consider along the way. Web design can big a big process, and it an ever-changing field. There are, always new technologies emerging to make it easier, and platforms are becoming more and more user-friendly for those who struggle with the coding side of things.
But for anyone designing a site for the first time, it can feel overwhelming and confusing. But by taking this one step at a time, it will help you focus and tackle each task when it arises, rather than feeling bombarded with all the things you have to do and consider. And let google be your best friend, whenever you get stuck, there are so many sites, blogs and forums discussing various platforms, plugins, codes and bugs, to help you solve those things that get your stumped along the way.
STEP ONE OF DESIGNING A SITE- COLLECT YOUR CONTENT
Before you start anything, you need to be clear about what you are actually working with and the purpose and function of the site.
- WHAT IS THE GOAL OF THE SITE
You need to design your site with your primary goal in mind, so it is important to be clear about this right from the start. Is the goal to get people on your email list, is the goal to get them to book you as a client and if so what is that first step, is it to book a call, review your packages, look at your portfolio or fill in the contact page? Is it to sell products or to get more readers reading your blog posts?
Each part of your site needs to be keeping that goal in mind to help direct the viewer to take the desired action.
Next, what are the smaller goals of the site? Perhaps someone lands on your site but isn’t ready to take that main action you want them to take just yet, what do you next want to direct them to to help warm them up and also allow them time to get to know you and stay in your audience, so they may come back another time. Perhaps the main goal is to sell a product, but if they are not ready to buy today, how can you keep them coming back, so they don’t forget you when they are ready? Is it by getting them to sign up for your email list, or subscribing to your blog or following you on social media.
- WHAT IS THE PURPOSE OF THE SITE?
Similar to the goal, what are you hoping to achieve by having this website? Consider why it is you feel the need to have a site rather than just using social media, and then be sure you design it around that purpose, rather than just creating a site, because you think you are meant to have one.
-Is it to provide potential clients with the information they need before they hire you so that they can look you up, check out your work, about, testimonials and price lists and decide from that if they want to hire you.
-Is it to give your business credibility? How can you add elements of credibility to the site then to reassure people? Maybe a media page is important, a strong bio, external links to a thing you have done and a blog sharing your expertise.
– Or is it to create customers who don’t just make one-off buy but become fans wh want to come back regularly to stock up on the amazing things you sell? Then your focus needs to be creating a great buying experience, and a site that is fun to return too and also a way to remind them of new stock or latest trends or ways to use the products.
- YOUR COPY
You may think you can leave writing your site until later on, and just dive into making something pretty first. But design needs to be created around and used to enhance the content, not the content be an afterthought. Graphic Design is communication design. So how can we design what your website is communicating, without the text? That’s not to say it has to be perfect at this early stage. The copy can still be a little rough and can be edited later on, but the bare bones at least need to be there. That way you can make sure all text has a place in the design and it all fits together well, and anything that needs highlighting can be highlighted. And anything that is of greater importance can be giving greater hierarchal status.
- IMAGES AND GRAPHICS
Much like copy, having your images ready before you start designing, allows you to design around them, and tailor the design based on that content. The images you should have ready include brand photography, profile pictures, stock photos, product photos (at least a few to get started) logo and brand graphics. If you are going to have a portfolio or galleries on your site, you don’t necessarily need everything upfront, but a few examples to work with will really help. Having these images before you begin the design allow you to make sure the design compliments and enhances the images and it all works cohesively. It also gives you the opportunity to make sure what you have worked. If an image just isn’t looking right for the intended use, you have that chance during the design to test it out and then either make design changes or look for a new image.
- SAMPLE POSTS
If you plan on having a blog as part of your site, having a few sample posts is really helpful, as this helps you to make sure you consider all your formatting needs for the blog design and it all looks the way you want. It also helps with checking that your images sizes are all working for featured images, thumbnails and in category pages.
STEP TWO OF DESIGNING A SITE- CHOOSING YOUR TECH
This can seem overwhelming and confusing when you are getting started. But making wise choices about your tech will make everything a lot easier for you in the long run. Don’t just pick things based on what someone recommended to you. Be sure to do your research and plan out what your needs are so you make the right choices for you and what you want to be able to do.
There are plenty of hosts out there, so it can seem overwhelming trying to find the right host for your site. Some of the things to consider when finding the right one and the right package is:
– How much traffic you think your site will be getting. You want to be sure they are allowing the space for the traffic you will receive so that the site isn’t constantly crashing.
– If you will be also storing files, hosting streaming content or offering direct downloads from your site that will take up more bandwidth.
– Location. There are lots of great USA hosts, but if you are outside the US, and either want something on your timezone or have a lot of local traffic, you may find a local host to be a better option.
– What platform you intend to use. Some hosts have special plans dedicated to making things easier and smoother with specific platforms. There are also hosts with one-click install options, so you don’t have to manually install the platform. I once had to manually install WordPress for a client whose host was not well set up for WordPress, and it was a nightmare. You could never just click a button to update WordPress either. It had to be manually updated, by transferring files over FTP. NOT FUN OR EFFICIENT.
– Support and forums. Inevitably things go wrong, you need help setting something up or something confuses you. It is important to have a host who has good support, who will respond and give genuine help when you need it. This may mean finding something local, or something with good reviews and a good track record.
– Your budget. While the other considerations should come first. Don’t be cheap only to find a lot of headache with your site crashing all the time and setting everything up always being a nightmare. Think about those needs first, then consider your budget.
Now if you were very eager when you first dreamed up a business name, you may have already snapped up a domain name. If you haven’t here are some things you need to consider:
– The name is easy to share an remember. If you want to make it easy for people to look you up, a name that is straightforward to spell and easy to remember will make life a lot easier. Of course, sometimes this can be hard, if all the names you want are taken, you may have to get a little more creative, but where possible make it is straightforward as you can.
– Check if the host you want to use includes a domain name in the package, or if it has to be purchased separately. If you already bought one with a different company, you will have to point the domain at the new host, so be sure to check with your host and domain companies how to do that.
– It is also a good idea to check who is using similar names. Is there potential for confusion at all? How similar are the names, what comes up first in google and is their business similar or completely different?
-Is your dream name being sat on? You may be able to negotiate buying it.
- THE PLATFORM
There are plenty of platforms to choose from and plenty of opinions to go with them about which is best. I do not believe anyone is ‘the best’ the key is finding the one that is best for your needs. You also want to choose something you feel comfortable using. You don’t want to be tearing your hair out over something just because you thought it was what you ought to be using rather then assessing if it is ideal for you personally.
The main things to consider are:
– The functionality you want. Do you want a user-friendly back end, a shop, a blog, a certain type of portfolio or gallery?
Do you want something you can build without code, or do you want full customisable freedom?
– What you feel comfortable with. Do you want something that is drag and drop and you never have to look at any code or do you like having the freedom to customise to your heart’s content without feeling restricted? Do you want something that you have full control over, or do you feel safer when the platform is in control?
– Something you can get the right help with. If you want something with complex capabilities but can’t create that yourself, do you have a developer that can help you and what is their expertise in.
If you want more of a break down of the pros and cons and what may be more suitable of various platforms, you can check out my Guide to choosing the right blog platform. While this post is looking at blogs, a lot of this still applies to business websites too.
- THE THEME
Once you have settled on the right platform for your site, rather than developing something from scratch, you can save a lot of time by finding the perfect theme to use as a base for your website design.
If you are using a drag and drop style platform like Wix or Squarespace or using something like Divi for WordPress, it is important to choose a theme that has both the layout and functionality you want for your site. While you will be able to remove and add things, you do want the majority of what the theme offers to be what you are happy to use for your design. So first think about your ‘must-haves’ and then search for themes based on that to find one you think will be the perfect fit.
If you are using WordPress, the big features to consider in a theme, are if it uses a framework such as Genesis (this can give your site a good base, so if you want to use this be sure to find a good genesis child theme), if you want to have a shop using Woocommerce, if so you want a theme that is Woocommerce optimised so that it is easier to set up and if you want a portfolio or galleries. There are a lot of great themes set up with beautiful gallery and portfolio features making this easier for you to create and maintain.
You also need to be sure that the theme has good feedback, documentation and has support, so if you do encounter problems you can get help.
STEP THREE OF DESIGNING A SITE- INSPIRATION AND STYLE RESEARCH
Now we can finally have some fun and start the visual side of things. It’s time to gather your inspiration. This means looking at other sites and also visual research for your branding. If you already have some visual branding in place, it’s a great chance to expand on that, create a mood board with your branding elements, images and layouts that fit well with your brand and website styles and ideas that you love and fit well with your brand. Think about what it is you like about the sites you find, is it the way they layout their text, or a style of the slideshow and the way the page flows. Or maybe it’s little details they add that make it unique. Look at what attracts you to the design and then consider what ideas you could take from that and adapt to your own theme, layout and branding.
Be sure to create or use a style guide for your site, including your logo, logo variations, colours, fonts, image style, graphics and any patterns and illustrations.
STEP FOUR OF DESIGNING A SITE- WIREFRAMES AND SITE MAPS
With your theme ready, armed with your content and your head full of visual and layout inspiration, it’s time to map out the layout by wireframing.
This is basically laying out how the elements will be placed on the page without any designing. It is basically the blueprint/framework/bare bones skeleton of the site.
By taking the time to create that framework before you design, you will be able to work out how best to structure and layout your content without getting distracted by choosing the right font, colour, plugin or mucking about with code.
You just need to focus on the arrangement of the elements of the page, hierarchy, how it will flow and function.
When you create your wireframes you need to be thinking about the grid and how things line up (to learn more about grids see my post ‘3 Design Mistakes and How to Avoid them‘)
As you create your wireframe you need to think out what content you have, the capabilities of the theme and platform you are using and how to structure the content so it is easier for someone to navigate and understand.
This is where sitemaps also come into play. When it comes to your navigation and pages, you need to map out what pages you are going to have and then how to access each of these pages. What will be in the top level menu, in the drop downs and then linked in the footer or on other pages of the site? This ensures you are considering the path someone will follow when they land on your page, and how easy it will be for them to find what they need, without confusion or overload.
STEP FIVE OF DESIGNING A SITE- DESIGN
With all the structure and foundations in place, you can now dig in and design your site. You will find now that with all the other steps in place, the design stage will feel a lot easier. You will be more confident about what you are designing as all the important parts have been considered and so everything you design has a purpose and works towards the goals and intent of the site.
I recommend using a program like photoshop or illustrator, or other design software depending on what you are familiar with and designing a layered document for each page of your site. Start with a template design that gives you the main elements of the site that appear on all pages such as the header, menu and footer and guides for padding, columns and the grid. Then for each page save a copy of this template and fill in the page content. It can also be really helpful to put your layers in folders and name them, so it is very easy to pull apart when you go to code/implement the design on your site.
In terms of sizing and document set up, your file should be 72dpi (unless you want the ability to pull parts of the design and use them for print purposes), RGB colour settings and the dimensions are twice the size of the actual website. For example, if on your actual site the outside container width is 1400px, then you should make it 2800px on your design document. The reason for this is retina display. If you want all your images and graphics to show clear and not blurry or pixelated on retina screens, then the image needs to be double the size it is displayed at. Such as, if you uploaded your profile picture and wanted it to be displayed at 500px wide, then you would upload a 1000px wide image and in the code ask it to display at 500px wide.
Another thing to keep in mind is that the design looks good on mobile too. This may mean designing this a little differently for the mobile version or always keeping in mind how your design will translate to mobile.
I hope these steps and tips help you with your website design journey and I look forward to sharing with you my final new website design once it is live!