Web Design (No-code / Custom code)

Zhi Nan Poh

Contact for pricing

About this service

Summary

As a Web Designer, I create visually appealing and user-friendly websites that enhance user engagement and satisfaction. My unique approach combines empathy-driven design with a strong focus on research and usability, ensuring that every website not only meets business goals but also addresses the needs and preferences of the target audience. By prioritising clear communication and collaboration, I deliver tailored solutions that resonate with users and drive results.

Process

1. Discovery and Planning
Client Kick-off Meeting: Discuss the client’s vision, goals, target audience, and specific requirements for the website.
Market Research: Analyse competitors and industry trends to inform design decisions and identify opportunities.
Define Project Scope: Outline project objectives, deliverables, timeline, and any necessary resources or budget considerations.
2. User Research
Competitor Analysis: Review competitor websites to gather insights on features and design elements that resonate with users.
3. Information Architecture
Site Mapping: Develop a site map outlining the website structure, including main navigation, subpages, and content hierarchy.
Content Strategy: Collaborate with the client to determine the necessary content, ensuring it aligns with user needs and business goals.
4. Wireframing and Prototyping
Low-Fidelity Wireframes: Creation of low-fidelity wireframes to visualise the layout and structure of key pages. Allow quick iterations.
Interactive Prototypes (if needed): Using features in no-code tools like Bubble or Wix to create interactive prototypes that simulate user interactions and flows.
5. Visual Design
High-Fidelity Mockups: Design polished, high-fidelity mockups using no-code tools directly.
Client Feedback: Present designs through the no-code platform for client review and feedback, allowing for real-time adjustments.
6. Building the Website (if no-code is used; otherwise Design Handoff will happen here)
No-Code Development: Using no-code platforms such as Wix or Bubble to build the website, leveraging the platforms' drag-and-drop features to implement the design quickly and efficiently.
Integration of Features: Set up necessary functionalities, such as forms, databases, and user authentication, using built-in no-code features. This includes exploration and usage of plugins as well.
7. Testing
User Testing: Conduct usability testing with target users to identify any issues and gather feedback on the design and functionality.
Iterative Improvements: Make adjustments based on user feedback, refining the website to enhance usability and engagement.
8. Launch
Pre-Launch Review: Conduct a final review within the no-code platform to ensure all features are functional and meet design specifications.
Go Live: Assist the client in launching the website, ensuring a smooth transition and minimal downtime.
9. Post-Launch Support and Optimization
Gather User Feedback: After launch, collect data and feedback from users to identify any issues or opportunities for improvement.
Performance Monitoring: Use analytics tools provided by the no-code platform to track user behavior, site performance, and engagement metrics.
Iterative Improvements: Work with the client to implement updates and enhancements based on user feedback and analytics, ensuring the website continues to meet evolving needs.

FAQs

  • What is the typical timeline for completing a website design project?

    The timeline varies based on the project's complexity and scope. Typically, a simple website can take 4-8 weeks from discovery to launch, while more complex sites may require 8-12 weeks or more.

  • What do I need to provide to get started on the website design?

    To kick off the project, please provide information about your business goals, target audience, existing branding materials (such as logos and color schemes), and any content such as copywriting you want to include.

  • How many revisions can I expect during the design process?

    Most projects include 2-3 rounds of revisions for each major phase (wireframes, high-fidelity designs, etc.). Additional revisions can be accommodated at an extra cost.

  • Will my website be mobile-friendly?

    Yes, all designs will be created with responsiveness in mind, ensuring that your website looks and functions well on various devices, including desktops, tablets, and smartphones.

  • What platforms or tools will be used for the website design?

    Depending on your needs, we typically use no-code platforms like Wix or Bubble for design and development. We can also discuss other options based on your preferences and requirements.

  • Can I update the website myself after it’s launched?

    Yes, once the website is launched, you will be able to make updates and changes on your own if we are using no-code platform. I will provide training and documentation to help you navigate the platform.

  • How will we communicate throughout the project?

    We will establish regular check-ins through email or video calls to ensure clear communication. In addition, project management tools like Notion or Jira may be used for updates and feedback.

  • What happens if I need changes after the website is launched?

    Changes can be made as needed, and we can discuss the scope and costs after the launch.

  • How will you ensure that my website is optimised for search engines (SEO)?

    Basic SEO best practices will be integrated during the design phase, including optimising page titles, meta descriptions, and image alt tags etc. Unfortunately, I do not provide professional SEO services.

  • What if I don’t have content ready when the design starts?

    A placeholder website copy (with possible use of AI) and free stock images will be used. It’s best to have content ready as early as possible, but we can work together to finalise it during the design process.

What's included

  • High-Fidelity UI Design Files

    Description: Complete, polished design files for essential website pages, such as the homepage, about, services, contact, and any additional pages defined in the scope. Format: Figma Quantity: All main pages covered in the scope, usually 3-5 core pages for a simple website. Revisions: Up to 2 rounds of revisions to finalise layout and visual elements. Details: Includes organised, labeled layers and clearly defined components, making it easy for the development team to implement the design.

  • Responsive Design Mockups

    Description: Designs for desktop, tablet, and mobile views, ensuring the website looks and performs well on all screen sizes. Format: Figma (with all screen sizes presented within the same design file for easy access) Quantity: Responsive versions of each primary page in the website’s design scope. Revisions: 1 round of adjustments to address layout concerns across different devices. Details: These designs ensure that the website’s UI is consistent, functional, and visually appealing on various screen resolutions.

  • Design Style Guide

    Description: A concise guide outlining the website’s visual standards, including colors, typography, buttons, icons, and spacing. Format: Figma Quantity: One comprehensive guide covering the entire visual system. Revisions: 1 revision to refine details if needed. Details: This guide serves as a reference for consistent styling across the site and supports future updates.

  • Interactive Prototype (if needed)

    Description: A clickable prototype showcasing the main interactions between key pages (or even animations), providing a clear view of the user experience. Format: Figma Quantity: Prototype covering the animations, main pages, and interactions such as navigation, buttons, and links. Revisions: 1 round of feedback-based refinements if needed Details: This prototype allows the client to review the design’s usability and gives developers a clear visual reference for implementing interactive elements.

Skills and tools

Web Designer

Frontend Engineer

UI Designer

Bubble

Figma

Power Apps

Wix

More services

System Design (Desktop / Mobile App)

Example projects

Contact for pricing