How to Plan, Build and Launch a WordPress Website

A successful web design project involves plenty of work before you type a line of code. Before you can start designing or building a site, you need to know what it needs to achieve, who the stakeholders are, and what you need to do to make it a success.

Today, I want to encourage you to take some time to get ready before you start coding a new project. In this post, we’ll look at some of the tasks you need to consider before diving into designing and building a site, whether that site is for a client, your employer, or even yourself.

We’ll walk through:

• How to put a team in place.
• Planning and communication (including project approval)
• Creating a development environment and possibly a teaser site or page, with SEO considerations
• Identifying a site’s objectives and audience
• Planning and creating/sourcing content to meet those objectives
• Designing an interface that fits with your objectives and works for your audience
• Visual design and branding

Without putting careful consideration into all of this before you start, your project won’t achieve its potential. So follow this guide and your site will be more successful than if you just plough on ahead.

Building a Winning Team

No project would be a success without people to work on it. You may be lucky enough to be heading up or working as part of a team, or you might be working alone. If you’re working alone on a client project, you’re still in a team – Your client is part of the team and you need to get their input (and that doesn’t just mean hiring you and paying the bill!).

Your team may evolve as you progress through the project, with additional team members coming and going as specific requirements arise.

Before you start, you’ll need to identify the key people you need as part of your team, including people doing the work as well as other stakeholders with an interest in the site. It’s important that you identify all stakeholders before you start or things could go badly wrong. I once worked on a client project, which was approved by the project manager at each stage, but when it came to launch, the managing director pulled the plug. If I’d known that the project manager didn’t have full authority, I’d have been able to communicate better with the managing director and could have avoided an unsuccessful outcome.

You might not know who your team needs to include right now, but once you’ve got your objectives and project plan in place you may need to recruit more people, including designers, developers, UX specialists, marketers and/or content creators among others.

Think about the people who’ll work on your site after launch. They may not be involved in site development, but as they’ll be managing it once you’ve finished coding, their input is important. They’ll need to be comfortable with using WordPress to manage and update the site over time, including any customizations you make to the admin screens or custom content you add such as custom post types. Include them in any decisions on customizing WordPress where relevant and make sure the UI works for them.

Identifying Project Objectives

Most clients who come to me for a website haven’t put a huge amount of thought into what their website actually needs to achieve. They just know that a website is something they need to have and that they want me to make it happen for them.

But without a defined set of objectives, a website isn’t a good investment of time or money. Take the time right at the start to identify what the site needs to achieve. Ask your client, manager or yourself a few questions:

• Who is the target audience for this site?
• What do I want them to do on the site?
• What do they want to do on the site? (this isn’t always the same was what you’ll want them to do!)
• How will this help achieve broader organizational objectives?
• How does it fit in with other activity both online and offline such as social media, advertising, marketing and other communications?

Having a clear set of objectives isn’t just for sites designed to make money. Every website is created for a reason and if yours is to support a community, communicate with an audience or anything else, it helps if you know what you’re trying to achieve.

You’ll sometimes find that different stakeholders have different objectives. Try to reconcile these as far as possible and agree on what the overriding objectives are before you start. If you think that competing priorities might cause problems during the site build, get as much as you can in writing up front.

Project Planning and Communication

Now that you know what your project needs to achieve, it’s time to communicate that with people and to start planning.

Things you will need to plan include:

• What needs doing, when and by whom
• Any additional people you’ll need to include in the team
• Who has responsibility for approving the project and at what stages
• What the project will cost (if applicable)
• How payment will be made (if applicable) and what happens if it’s not
• What happens if the project’s scope or details change during the project, including contingency plans
• What the client needs to do to help make the project a success, and when
• What will happen after the website has been built – who’ll be updating and managing it and how it will fit with other activities such as social media marketing
• What training will be needed for the client or site manager(s) to help them manage the site after launch
• What involvement you’ll have in reviewing the site after launch, when and how this will happen

These elements will most likely go into three documents: The contract, the project specification, and the project plan. I find it helpful to keep these three things separate but you might find it easier to merge the project spec and the plan. Include a top level summary of the project spec in the contract to avoid any contractual issues along the way.

You’ll need to communicate all of these things to the relevant people, with a communications breakdown that could look like this:

• Client / project manager: Costs, approval process, involvement in project, contingency plans, post-launch plans.
• Content creators and site managers: What the site will include, who’ll be adding it and how the site will be updated and managed after launch. You might need to ensure this group gets training if they’re not familiar with WordPress.
• Site design and development team: Project objectives and timescales, specific tasks and deadlines, contingencies and what they need to do if things don’t go according to plan.

Development Environment

Before you start to design and develop the site, you’ll need to set up a development environment that works for your team (and for the client if they’ll be involved in this). Consider:

• The environment you’ve agreed with the client or project manager for the live site (e.g standalone WordPress or Multisite)
• Whether you’ll be working with the client’s hosting or your own
• Whether the team is co-located
• The design and development tools your team has experience with
• Any new design and/or development tools that will help with this project and which your team will have to learn
• Security considerations.

If you’re working with a remote team you’ll need a development environment that everyone can access in real time and use to keep each other updated on progress. I’d recommend using a version control tool like GitHub to manage your code as it’s created and keep everything in sync.

If your team is co-located you can all work on one development site stored on the same server, although you might choose not to (at least early on) if individual team members are working on different parts of the project. Make sure that whatever tool you’re using prevents people from editing files which someone else is already working on. GitHub will still be helpful in a co-located environment as it will help you keep track of your code as it develops and roll back to an earlier version if needs be.

You’ll also need to identify who’ll have responsibility for which parts of the codebase to ensure there’s no duplication of effort, and if the team hasn’t worked together before you may need to agree on coding practices (which will, of course, include W3C standards and the WordPress coding standards).

Holding Site or Teaser Page

If you’re building a brand new site and not replacing or redeveloping an existing site, you may need to put a holding site or teaser page in place while you develop the new site.

It makes a lot of sense from an SEO perspective to have your domain name active before you launch, and to have at least a small amount of relevant content on it. A teaser page will also encourage people to come back when the site is ready, and you can be as creative in this as you want!

Teaser pages needn’t be dull – they can create a sense of mystery or tell a story. There are plenty of themes and plugins that can help you build a teaser page including our own Upfront.

Planning Content

It’s tempting to dive straight into visual design or code. Indeed, I’m often approached by a potential client saying “I want a site that looks like this” with a link to a competitor’s site.

But once you have your objectives agreed, the next step is to identify what your website will need to include in order to meet those objectives. In other words, the content.

Content isn’t just pages and text: it can include interactions, media and processes. If your site is designed to sell products, then your main content type will probably relate to those products, and include descriptions, images, videos, reviews and more. If your site is a news site, most of the content will be articles, photos and videos. If your site’s purpose is to help a community interact with each other, your content will be the pages and page elements that make that possible.

The work that you did when identifying your objectives will help you identify what content you need. Your content won’t just be driven by your objectives, but by the nature of your audience too: factors such as age, browsing habits, expectations and ability level (including any specific accessibility concerns) will influence what content you include and how it’s presented.

Planning the Structure and User Interface

Once you know what your content will be, the next step is to identify how you need to structure it. This will be based partly on a logical structure and also (importantly) on what works for users and makes it easy for people to navigate through the site.

Before you start creating content or building pages, identify how the site will be structured and how this fits with the content management system you’re using (for example if you need to create multiple content types or templates). Think about the user experience and how the user interface (UI) design will help people find content and navigate effectively through your site. Again, an awareness of the nature of your audience will inform this, as different audiences may have different expectations for the UI or find it easier to navigate through less traditional structures and interfaces. If your structure and interface isn’t 100% easy and logical to follow, this needs to be for a good reason and backed up by user testing.

You can experiment with this as you go along to some extent. For example, your site navigation can easily be altered using the WordPress Menus interface or widgets. Listen to your test users and change things if they don’t work.

User testing as early as possible during development will help you check that your content and structure is user-friendly and is helping users achieve their objectives on the site (and you or your client to meet yours).

Branding and Design

Finally, we come to the step which is so often put first by people planning their website. They see a few sites they like the look of, think II’d like one of those,” and hire a web designer.

But I’d argue that the visual design is actually the last stage before you start to code, for three reasons:

• The earlier steps will inform the design and make it more effective
• If you’re using modern development techniques you’ll probably be designing in the browser
• If you’re using a mobile-first approach (which I recommend), the design will be dictated by UX and content and not by filling acres of space on a desktop screen

Here’s how the steps you’ve already worked through will help your visual design and make it more effective:

• Knowing your objectives will help you create a design that lets your site achieve those objectives and is consistent with other online activity
• Knowing your client will give you a better understanding of their brand so your design is more consistent with that
• Knowing your audience will help you identify their expectations of your design and what is proven to work for that type of audience
• Communicating with the stakeholders and team will help people understand how the design fits with broader objectives and makes the site more effective
• Knowing what content your site will hold helps you design a layout that makes the content shine (for example, a text-based site will need a very different design from one made up of videos or interactions)
• Having an agreed structure will help you know what sections the site will have and where specific designs will apply to different page types or elements
• Planning the user interface means your overall design will provide the best user experience possible and help users make best use of the site

I strongly believe that website design isn’t about making something that looks pretty: it’s about creating a design that is effective in providing a great user experience, communicating your brand to visitors and helping your site achieve its objectives. A good looking design may well be part of this but it shouldn’t be an end in itself.

As well as the advantages of completing all these other steps before starting to design your site, the fact that you’re likely to be designing in the browser will also mean that it’s best to leave this to a late stage in the planning of your site. You might not be using code that will make its way into your finished site, but you will be using some form of code. I used to create a working prototype of a site in static HTML and CSS then convert that to a theme after the client had approved it: but these days I find it quicker to spin up a prototype theme to start with. It can save a lot of time and if you’re used to working with WordPress, you’ll probably find it quicker in the first place. But this is where you’ll have repeat work if changes are needed, so it makes sense to be as well prepared as possible.

If you haven’t tried designing in the browser before and are still using wireframes and PSD files, it’s worth knowing the benefits of switching to using code in your design process.

The biggest benefit for me is around responsive design, which is what really made designing in the browser take off. You can no longer predict what screen size even a sizeable minority of users will be viewing your site on, so creating a static mockup of a screen with a given width won’t reflect the experience of the majority of your visitors.

As well as this, I’ve found that designing in the browser also has huge benefits in terms of client response. Back in the days when I used to provide clients with a static mockup, they always (and I mean always) asked for changes to that design. Once we moved to the alpha stage of the site’s development, they generally asked for more changes to the design, often reversing what they’d asked for at the mockup stage. In other words, if I’d shown them the design in a working prototype of their site in the first place, those two sets of changes wouldn’t have been needed.

Clients love it when they can see and interact with a working prototype of their site. It gives them a much better feel for what they’re ultimately going to get that anything on paper ever could. They’re much less likely to demand changes. It saves me a lot of work and improves my relationship with my clients at this crucial stage in a project. If you haven’t tried it yet, I recommend it!

At Last: Starting to Code

You now know exactly what your site needs to achieve, who its audience is and how you’re going to build it. You may already have started coding if you’ve been designing in the browser.

Now is the time to start the serious business of coding the site. Having completed all the steps above, you will find coding quicker and easier and you’ll have an easier time getting client approval at each stage.

Planning and Preparation Equals Success

Creating a website isn’t something you can just dive into. With the competition for users’ attention becoming ever more fierce, it’s important that any site you build, whether that be for yourself, your employer or a client, is as effective as possible at attracting an audience and encouraging that audience to do something once they’re on your site.

If you follow the steps above you’ll have a solid planning process to follow before you write a line of code, which will make your coding easier and more efficient as you’ll have less rework. It will also make the final product more effective and easier to maintain and develop after launch.

What would you never miss out before starting a website build? Let us know in the comments below!

Tags:

• Website project