Submit Saturdays: Planning and prototyping your website

Welcome to Submit Saturdays, a year long series of articles in partnership with Squarespace. It’s pretty much essential to have an up to date website in order to show your work to prospective and established clients, peers and, well, the world in general. In this advice article we take you through some of the steps that need to be made when setting up your website in order to make sure that it is manageable, user friendly and searchable. We spoke with Dan Powell, a web developer and long-time collaborator with It’s Nice That, to compile a list of practical considerations to keep in mind when planning and prototyping your website.

Setting up your domain
In short, your domain name should be memorable and to the point. “Yourname.com” or “yourstudioname.com” are easy wins and are probably where you are headed if you haven’t already registered it. As of January this year there are over 2,000 top level domain names available, aside from the traditional .com or .co.uk – now you can choose .lol or .adult among others. “Before buying a domain you should think about what the domain is going to host, who your audience is and how they are going to be pointed to that website,” says Dan. “If you are setting up a business and you expect people to find you through search engines go for the .com, it just looks more professional and will be more easily remembered. If you are making a micro site or a site with a more playful tone or your audience is a specific youthful net savvy culture a playful TLD (top level domain) can sometimes work in your favour.” You can begin your search for a domain with Squarespace here.

Choosing a platform
“If you are not a developer and don’t want to touch much, if any, code, it’s all about templates,” says Dan. “Don’t rush to pick the thing you like the look of. Take time to research templates of each service and look at what they are suited for. Squarespace, for example, is good for simple clean portfolios, blogs, and a nice e-com experience.”

Other platforms may include many user-created templates for you to choose from but what you get in choice sometimes also can cause you a headache in setting it up and maintaining it. Beware of lower quality code that can slow your site down if it hasn’t been set up correctly. “The key is to research and ask people who have a site that does something similar,” says Dan.

Developing a user story
When designing your site you need to understand the expectations and needs of those who are going to visit it. If you can anticipate how people might move around the information you will provide on the site, then you can design the navigation to make this as easy as possible. A good place to start is to develop user stories. “If I’m building a graphic design portfolio one user story might be: “As someone looking to approach a designer for a job, I want to see examples of previous work.” I will often have many of these types of questions varying in specificity,” says Dan. “Once I have developed the site a bit further I am able to go back to the questions and check how well it works.”

The next thing to do is create a user flow diagram that will show where different information sits. Start with a homepage and then create a hierarchy of pages. It’s important to think of your users needs as an overloaded top layer of navigation can be just as confronting as none at all. “Working out on pen and paper is always a great method to start with,” says Dan. “You quite quickly see where things overlap or go wrong. Even if this is just a quick sketch always do it as it will help you avoid making convoluted routes for your views and allow you to understand the hierarchy of your content.”

Designing your pages and optimising your content
Once you have sorted the diagram, you need to optimise your content and make sure that each page does not take a long time to load. Many platforms will optimise content for you, but it is useful to be aware of the maximum size your images or video will be seen, so you can prepare it accordingly. “One of the biggest problems for a slow loading website is because people upload large images that haven’t been optimised for the web,” says Dan. “You really should be saving images out at the max size they will appear.”

Developing a content strategy
It’s important to establish just what purpose your site serves and how regularly you will want to update it. “Having a content plan is always a good idea as it makes sure things go out in the right place at the right time,” says Dan. “It also makes sure that the best quality content goes up rather than a hastily thrown together update.” Think about what your users will expect and how much content you will deliver. Is your newest work always the most important? Or are there key projects that you want celebrate? Each visit to the site is a visual pitch, the effective communication of your work is vital.

Testing before launch
Before you make the site live and start letting people know about your site, you need to make sure it works. At this point go back to your user journeys and site diagram and test the original ideas. Tweak or change anything that might have been lost along the way. “Test the site on everything you can get your hands on – from your phone to your grans old laptop,” says Dan. “See if it works on as many devices as possible. Also, sit with people and ask them to look around the site. Don’t guide them though, just observe. You will soon see how different people use websites and if what you planned is really working.”

In partnership with Squarespace

Squarespace is a creation tool enabling individuals to build a great website by giving them the tools to find elegant solutions and get their voice heard in the world of online publishing. Whether for experienced designers or for someone putting together their first website, it makes forming a beautiful platform simple.

If you’re not currently using Squarespace to host your site, the kind folks over there are offering It’s Nice That readers 10% off their services. Sign up here or upgrade your account using the discount code SUBMIT to get 10% off.