My Process for Creating a New Website

Often, when I come across people interested in my services, be they potential clients or colleagues, they end up asking me how I create my websites.

What they’re really asking is not technical. What they want to know – what they need to know – is what it looks like when I create a new website, so they know what to expect when they decide to work with me.

That’s why I wrote a whole section of my website dedicated to my process. You can find more about it in this article.

Why is it necessary to have a good process

There are many reasons why having a good website creation process is not just a good thing to have, but, in my opinion, a necessary step towards building a sustainable web design & development business.

This comes down to many reasons, such as:

• It helps me to not miss any important step in a website build.
• It allows me to get client approval before moving on to the next step, ensuring the project stays on track.
• It keeps clients informed about the project’s progress at every step.
• It improves project management when working with other professionals on my team.
• etc.

From a client’s perspective, this process is what allows me to create a professional website project that will help their business grow.

Skipping any part of it would result in a website with lesser chances of meeting the goals it was built for.

7 steps of a website build

I divide my process into 7 steps, each one being essential for a successful build.

Research & Planning

Research & Planning is the first and extremely important step in my process. It ensures the website is focused on achieving client’s business goals, and it helps make communication with client effective and smooth.

This first step is further divided into research and planning:

Research includes:

1. Company research
2. Industry & competitor analysis
3. Keyword research
4. SEO audit & review
5. Additional research (if needed)

Planning:

1. Content & messaging strategy
2. Project setup & communication
3. Media collection
4. Conversion definition
5. Sitemapping

With Step 1 completed, I have a clear roadmap: I know which pages to build, the purpose of each component, I prioritize conversions, I have target keyword clusters for the copy, and defined components to develop.

This sets the stage for the actual design and development process. Without dedicating time to this step, achieving the website’s goals would be far less likely.

User Experience Design

UX Design, the second step, is essential for creating a conversion-focused design. It involves designing low-fidelity wireframes for pages and outlining user flow.

Key components of UX Design:

1. Wireframes: Designing low-fidelity mockups outlining page layout with element placement and descriptions.
2. User flow visualization: Creating flowcharts to illustrate the user’s experience on the website.
3. Communication and iteration: Efficient discussion, experimentation, and approval of wireframes.

Importance of UX Design:

• Flexibility: Wireframes provide flexibility for quick layout changes, experimentation, and iteration.
• Efficiency: Wireframes help in easy transition to the copywriting step with a precise understanding of the website’s flow and layout.
• Conversion-centered design: Prioritizing principles that enhance conversion rates, ease of use, and repeat website visits.

Skipping the UX design step would demand significantly more time and effort from both myself and the client during content and design discussions. Implementing changes would become increasingly more difficult, potentially derailing the project. Most importantly, the website’s conversion optimization would be compromised.

Copywriting

Copywriting, the third step in my process, involves writing search engine-optimized and persuasive text content for the website. It is the most important step for generating leads, sales, and attracting search traffic.

Key aspects of Copywriting step are:

1. Sales and SEO: Content needs to persuade users to take action, and, at the same time, attract search engine traffic.
2. Aligned with research: I use market and keyword research from the first step to tailor content to the client’s audience and market conventions.
3. Contextual placement: Content is constrained by wireframes from the UX design step, which ensures effectiveness through strategic placement for quick comprehension by the website’s users.
4. Tools and optimization: I use tools for SEO optimization and improving readability.
5. Having a copywriting process:
   • Creating SEO, content, and messaging requirements for each section.
   • Developing a content outline for each wireframe section.
   • Writing the initial draft, optimizing for search engines and readability.
   • Editing with tools, manual review.
   • Maintaining version history.
   • Reviewing wireframes with filled content for conveying the intended message.
   • Seeking client approval.

Types of copy:

1. Page copy
2. Support copy (instructional and support content enhancing usability)
3. Other content: (meta descriptions, automated email content, and other components ensuring comprehensive coverage)

With persuasive, SEO-friendly, and shareable content populated in wireframes, the transition to the more visually appealing steps of designing and developing the website begins.

User Interface Design

UI Design is the fourth step in my process. It involves creating final design mockups for key pages and elements.

This is where I bring the wireframes to life, making sure that they align with brand guidelines and the client’s company style. This step includes using images, brand colors, fonts, icons, illustrations, and animations to enhance the visual appeal of the website. The goal is to make the end result not only visually pleasing but also user-friendly.

During this step, I create high-fidelity mockups in Figma. It’s rarely necessary to create a mockup for every individual page. Instead, I mostly just design the home page, key templates (e.g., blog posts, service pages), and a comprehensive style guide. The rest of the website uses the same or similar design elements for all its pages.

Consistency is a key aspect of UI design, and adhering to a consistent design philosophy allows me to design elements once and apply them consistently across various pages and templates.

Once UI Design is complete, the final design of the website is realized. This marks the conclusion of the design work, and the mockups and wireframes populated with content serve as the foundation for the development step, which is next.

Development

The 5th step is Development, where I transform mockups and wireframes into a fully functional website that’s responsive, easily maintainable, scalable, and accessible.

Responsive development means making the website look and perform well across various devices, from wide monitors to small smartphones. Using mockups and wireframes streamlines the development process, and any issues that come up during this step often indicate gaps or oversights in previous steps.

I adhere to industry best practices to make websites:

• Responsive: Performing well across a spectrum of devices.
• Maintainable: Minimizing the need for frequent fixes and addressing issues swiftly.
• Scalable: Adapting easily to business growth.
• Accessible: Implementing accessibility best practices for easy navigation and readability, recognizing its rising importance for SEO.

The development process includes setting up the base website, configuring global styles, installing plugins, developing templates, handling dynamic elements like custom post types and fields, creating various components, integrating advanced functionalities (e.g., e-commerce features, learning management systems), migrating content, and integrating third-party functionalities.

After completing this step, the website is fully developed and ready for optimization and launch.

Optimization & Launch

The sixth step in my process is Optimization & Launch, a mandatory step involving fine-tuning the website for optimal performance, and finally, launching it.

I prioritize optimization from the start, recognizing its importance for clients with growing businesses that are heavily reliant on their websites for growth. To make sure the website functions at its best, I go through an extensive optimization checklist, covering:

• Security: Fortifying the website’s security through server measures, firewalls, automatic scans, daily backups, and uptime monitoring. Implementing strong passwords, two-factor authentication, Captcha, IP blocking, and cleaning up unused scripts, plugins, and components.
• Performance: Ensuring fast loading on all devices by selecting appropriate hosting, using content delivery networks (CDNs), employing caching, preloading, script management, minification, delaying, optimizing images, and incorporating lazy loading.
• SEO: Conducting on-site (technical) SEO by checking URL lengths, optimizing titles, descriptions, image titles, and alt tags. Configuring defaults for search engine results pages (SERP) and social media link displays, checking robots.txt and sitemap.xml files, ensuring indexability, redirection checks, setting up instant indexing, and addressing other technical SEO factors.
• Marketing Integration: Properly integrating all client-owned marketing communication channels into the website’s functionality.
• Analytics: Integrating analytics software and configuring conversions for post-launch performance evaluation.
• Reporting: Creating a real-time reporting dashboard using Google Looker Studio, featuring crucial data like conversions and user flow for real-time monitoring of marketing campaign performance.

After optimization, I move on to testing in order to fix any existing bugs before the launch. The final step involves moving the website from the development server to the live server and pointing the client’s domain to it, officially completing the launch.

Neglecting website optimization can lead to complications, while proper optimization and testing establish a solid foundation for all marketing activities centered around the client’s website.

Website management

Website Management, the seventh and ongoing step in my process, is important for sustaining the optimal performance of a business website continually. Growing businesses rely on their websites to generate leads, sales, and other results, making ongoing management crucial.

For businesses to reach their goals, their websites must avoid breakdowns, slowdowns, and usability issues resulting from inconsistent changes or security breaches. The design and code quality must be maintained and kept scalable to quickly adapt to new company or market requirements. Additionally, the interconnected ecosystem with marketing services demands regular checkups.

Management plans are the key to ensuring consistent website performance and the ability to expand as market demands evolve. These plans encompass monthly tasks, priority tech support, and capacity for minor website edits.

Website management includes various components, each with sub-tasks, checks, and general maintenance activities:

• Website Hosting
• Performance
• Security
• Functionality and Integration Updates and Maintenance
• Policy Compliance
• Off-server Backups and Monitoring
• Website Edits
• Support and Response Time

I strongly discourage neglecting website management, as websites without active management tend to decline gradually, which gives competitors an advantage. Each website I construct is enrolled in a management plan.

While problems may arise in any website’s lifespan due to new code, changes in third-party services, or server issues, active management significantly reduces the likelihood of such issues. When problems do arise, they are promptly and cost-effectively resolved.

This marks the final step in my Web Design & Development Process. The final website is now able to excel in any competitive market. It stands ready to easily integrate with marketing campaigns, attract substantial traffic, and consistently achieve high conversion rates.

Conclusion

Ever since I started adhering to this process, my website builds are better and my collaboration with clients is smoother. If you want a more detailed description of my process, click here.