Page 1 of 39

Lesson 8 – Develop Responsive Web Design (Part 2)

Objectives:
1. Identify client need and requirements.
2. Identify the resources needed for the project.
3. Learn how to create budget for the project.
4. Develop wireframe with content creations, photos and graphics.
5. Develop mood boards and sitemaps base on the design.

Content:

Client specifications and requirements are determined

Client Requirements for Website Design

So, you’ve just signed your terms and engaged in website design services with Primal Space, but what
next? We’re often asked by clients before a website design project commences; ‘What is required?’
Therefore, we’ve decided to write everything down in this handy guide making life much easier for you,
our new web design client, going forward. Below we have detailed exactly what you will need. Helping
you prepare to get started with the project, before work at our end can commence.

No matter what stage you are at with your website design idea. You can use this blog article as a great
reference point. It’s worth noting that this is a general guide we have written, not every concept in this
article may apply to your website design. But the majority certainly will, as most of the list are core
aspects of any website. However, it’s important to note that if you are having your website designed by
our good selves, the information that we detail here will be required before we start building and
designing your website.
If you aren’t yet at that stage, you might want to go back a step and check out the post
about gathering specifications and the goals of your new website. We’ve also created a new more in
depth post titled how to create requirements documents which includes example templates that you
can follow.

Design Requirements

Your idea and vision for the project is arguably the most important part of the whole preparation
process. Tell us about your idea! What purpose do you want the website to serve? Will your WordPress
website require WooCommerce functionality to allow customers to shop online? Please tell us as much
as possible!

It’s important to have everything in a clear structure that is easy for us to follow. Your ideas and visions
can be collated into documents or mood boards if you like and provided as such to us by scanning and
uploading to our Google Drive. Or we can meet over video call or face to face for coffee and you can tell
us all about your new website concept.
 Page 2 of 39

Color Scheme

If you have a particular color (or color spectrum) that needs to be featured throughout the website.
You’ll need to specify this to us. We’ll require the 6-digit hexadecimal color code for the color you want
to use. We recommend using the Hex color picker website here – Hex Color Picker. For a website design,
we generally like to stick to a base of 3 or 4 colors at most. With 2 of those colors generally being black
or white. If you’ve read other articles on our website, you’ll already know that we are lovers of white
space within a website design. Allowing your content to take center stage so to speak! The color you
provide to us from the hex color chart will generally be your brand colors. Or the main color that you
want to be used through the theme of your website design and other marketing material including your
logo.

Fonts

Have you decided on specific fonts that you’d like to be used within the design to depict your brands
image? Just like color, these fonts should be consistent throughout all marketing materials as well as
company logos to create a concise brand identity.

Source: Google.com

Website Content Requirements

Forming the nuts and bolts of your website so to speak is your websites content! We’ve broken this
concept up into a list of images, mock-ups, text wording content and your logo. Depending on your
website requirements what you will need may differ, or you may need to provide us with more content.
 Page 3 of 39

For example, these could include, videos, PDF or any other graphics that you require within the design.
Your mock-up provided should reference the file names of any particular content you require within the
website design.

Images

We’ll let you into a little secret, eye-catching images that give an instant wow factor are an integral part
of any website design. If you have really strong and powerful images, the design of your website will
instantly look more impressive. We would thoroughly recommend hiring a professional photographer
where possible. Providing us with the most high-resolution photos you can get your hands on. It will
really make a difference to the final design and help your website stand out alongside your competitors.

If your budget can’t stretch to paying for a professional photographer, then perhaps looking at how you
can obtain copyright free imagery for your website online would be beneficial. There are lots of great
websites out there where you can access high quality photos free or for a donation.

Mock-ups

Source: Google.com

A mock-up in terms of website design is a document showing how you want that page of the website to
be laid out. We receive mock-ups from clients in many forms. Some are more sophisticated than others.
However, it’s an integral part of the preparation process for your website design. Without a mock-up
 Page 4 of 39

being provided to us, it’s very difficult to get a clear idea of how you want your content displayed on
each page. There are a whole variety of formats in which a website design mock-up can be provided to
us.

You can provide hand-drawn mock-ups to us. Or you can go to the other end of the spectrum, providing
professional wire-frames showing each page of your website. Mock-ups can be provided as a Word
Document, or PDF. Or like we say if you are hand drawing your mock-up, you can scan these and upload
them to Google Drive.

You may also wish to provide us with website screenshots representing particular elements or functions
of existing websites that you would like to be featured within your own website.

Text Content

Source: Google.com

The wording for text content should be detailed in a separate document for each page. The text content
can be provided to us as a Word document (.doc) or as a Text document (.txt), either is fine.

Before your project commences, we’ll have established how you’ll provide your content to us via a
shared access Google Drive folder. This is all part of your website design project management
plan which we will have put in place and provided you with ahead of development. This is a requirement
of all Primal Space digital services.

Logo

If your logo is not being purchased through us, you’ll need to provide us
with this. The logo asset files should be provided as a .ai or .eps file type.
Allowing us to edit the logo’s design and size where required to fit within
your website’s pages. The logo is often edited purely for the purpose of the
website design.
 Page 5 of 39

If you don’t yet have a logo for your website, reach out to us for a quote for our graphic design service.
Allowing us to design a professional logo for your business as part of the build.

Access to your Domain and Hosting

If your domain was not purchased through us here at Primal Space. And/or you have your hosting with
another company. For us to be able to implement your website live, we’ll require login access to our
domain and/or hosting control panel to apply the settings. Even if you have your domain purchased
elsewhere. But you are having your website hosting supplied through ourselves Primal Space. We’ll still
need access to the domain settings to apply changes there to point to the new website.

Google Drive Access

We use Google Drive for all content to be issued to us. Providing you with access to folders for each
piece of content to be uploaded to before the website build commences. The folders are secure and
only accessed by ourselves and you the client. It’s recommended for you to install Google Drive on your
computer for ease of file upload. You’ll also be able to see the folders being updated by us.

Shortlist

A concise bullet point of the core concepts of what you will need to provide us with, in advance for your
shiny new website:

 Concept/Idea/Vision
 Website Content (Including images, text content etc.)
 Color Scheme (If you have a preference/specific requirement)
 Mockup(s)
 Domain/Hosting Access

We hope you’ve found this post helpful and have now deciphered what you will need to get going with
your websites build. If you’re ready to get started, or if you have an idea in mind and looking to get
some more information before taking the leap. Then please don’t hesitate to contact us. We’d love to
help you bring your ideas to life.

Check out our more recent blog post in this series titled how to create requirements
documents. Providing more in depth requirements advice and a free digital template that you can
utilize, helping you get started.

If you’re interested in working with us then please submit your website requirements to us. You can also
include any project templates within this document.
 Page 6 of 39

Resources are identified

Four basic things are needed for a website: domain name, webhost, text editor, and an ftp program. This
will get you a basic website without pictures or any complex backend, but it is punctual and can be
effective all the same. Web development is fairly easy to learn and get into.

Web Development/What's needed to develop a website?

The Simple Website

Web development is fairly easy to learn and get into. This is mainly because it is so accessible, and
because a simple website requires very little overhead or experience to create. To create a simple
website, one will need to have the following:

1. Domain Name - the common place the user will find your site on the World Wide Web. For
example, www.yournamehere.com is a domain name. You can purchase your own domain or
get a free one offered by many different online companies. Domains have come down in price
drastically over recent years, and can now be found for under $10 USD.

Source: Google.com

2. Webhost - this is a company that will "host" your domain and web pages. By "uploading" your
"data"—transferring the files that make up your website—to their server, you give the
consumer access to your page on the Internet.

Source: Google.com

3. Text Editor program and a little knowledge of HTML - HTML, or Hyper-text markup language is
the most basic of the web-languages. All you really need to develop a web page is some basic
knowledge of HTML and the Windows program Notepad (the Macintosh equivalent is TextEdit).
 Page 7 of 39

A page written in this "markup language" can contain images, links, text formatting, etc., and its
file extension is .html. After you type your page into one of these free programs (or many other
pay programs), upload the file to your hosting. A user's browser will then be able to decipher
the HTML.
4. FTP Program - FTP stands for file transfer protocol, and is the most common method of
uploading your files to your hosting. When you register a domain name and secure space online
for your data, your webhost will give you an FTP user name and password. By typing these into
one of the numerous free FTP programs, you can access your web space and upload your
website.

Human Resources

As for the more advanced websites, a staff is usually required to maintain and keep up the site. Aside
from knowledge of HTML and webspace, people may be required to do miscellaneous jobs such as
graphic design, advanced coding, customer relations, network administration, etc.

Capital

Capital, varying with the complexity of the website's goals, is also needed. For a simple website run by
one person, the expenses may be as small as paying for the domain and yearly hosting fees. As websites
get more complex and intricate, the amount of capital increases proportionally.

As a common sense rule, the bigger the website you want, the more people, money, and technology
you're going to need. This section should serve as a guide for planning resource gathering and
management, and to give you an idea of what's needed to start up and maintain a website.

Budget are determined according to the scope of the project

Estimate the cost of creating a website
 Page 8 of 39

Nowadays, having a strong online presence is essential for any business looking to expand its reach and
grow its operations. Whether you’re a growing company, an independent entrepreneur, or even an
artist seeking to share your work with the world, creating a website is often the first step toward
achieving this goal.
However, one aspect that often raises concerns when it comes to building a website is the evaluation of
the required budget. How much will it actually cost to set up this website? How can you ensure that
your investment will be worthwhile?

In this article, we will guide you step by step to understand how to assess the budget or cost of creating
a website, and we will provide practical tips to ensure that your website aligns with your needs, goals,
and budget.

First Step: Determine your needs and goals for your future website
Even before delving into technical details and budget estimations, the first essential step in assessing the
cost of creating your website is to clarify your needs and define your specific goals.

This initial phase of reflection is often overlooked, but it forms the foundation upon which the entire
process of designing and developing your site relies.

Setting your strategic objectives

Imagine this: you decide to build a house, but instead of drawing detailed plans and defining your needs,
you simply start buying materials and hiring workers. You would likely encounter budget overruns,
delays, and a final result that doesn’t match what you had envisioned.

Creating a website is similar in this regard, where rigorous advance planning is key to avoiding similar
inconveniences.

To begin this planning, ask yourself the following questions:

 Page 9 of 39

What is the purpose of your website?

First, think about the fundamental purpose of your website:
 Is it a showcase site to present your company?
 An online store to sell products?
 A blog to share your knowledge?
 A blog or portfolio to showcase your artistic work?
 A web application?

Depending on your ambition, its structure, content, and the features to deploy will not be the same.

Who is your target audience?

Try to create a profile of the individuals you want to reach with your website by creating their persona:
 Socio-demographic profile
 Interests
 Behavior: buying habits, websites they visit
 Needs and expectations

Understanding your audience will help you design a website that caters specifically to their needs, which
is essential for its success.

What specific features do you need?

Create a list of the features and characteristics you want to include on your website, such as a contact
form, online payment system, image gallery, member area, customer testimonials, chatbot, etc.

The more detailed your list, the better you can assess the costs associated with each feature.

What is your timeline?

Determine the date by which you would like your website to be operational. Do you have any specific
time constraints, such as an upcoming event or a product launch?

Your timeline will influence the choice of development method and the associated costs. Be sure to
account for an adequate buffer for testing and any potential unforeseen issues.

Do you have any specific design requirements?

Think about the visual aspect of your website. Do you have any specific design preferences, such as a
particular style, colors, animations, or videos?

Design plays a significant role in the user experience, and it’s essential to communicate your preferences
to your designer or developer.

Do you want to offer an accessible website for people with disabilities? This can impact the choice of
colors, typography, effects, etc.
What is your initial budget?
Having a general idea of your initial budget is important because it will help you determine which
features are achievable within your investment from the outset.
 Page 10 of 39

The clearer and well-defined your goals are, the easier it will be to estimate costs and ensure that your
website meets your expectations.

Necessary features
The creation of an effective website relies on much more than just a beautiful visual design. It is
primarily the combination of features and interactive elements that make it useful and appealing to
your visitors, enhancing the customer journey.

Before diving into the development of your website, you must define the essential features that align
with your objectives, whether it’s selling products, generating leads, sharing content, or providing
information.

Advanced website functionalities

Make a list of all the desired features
Begin by creating a comprehensive list of all the features you would like to see on your website, even if
they appear minor at this stage.

Some examples include search filters, contact forms, search function, image galleries, customer
testimonials, a blog, online payment system, live chat, social media sharing, member area, maps, etc.

Prioritize your needs

Once your list is established, prioritize the features in order of importance. Identify those that are
absolutely essential for the basic functionality of your website and those that can be considered as
future enhancements or additions.

This prioritization will help you stay focused on the essential elements and accurately assess their cost.

Think about the user experience

Always consider the user experience when defining the features. Your website should be user-friendly
and intuitive, and it should also adopt responsive design to ensure optimal navigation.

For example, if you have an e-commerce site, ensure that the payment process is simple and secure. If
you have a blog, make it easy to navigate between articles and search for content.
 Page 11 of 39

Imagine the media resources

Start thinking about the written and media content you will integrate and how you want to make it
available to your visitors: blog articles, videos, images, etc.

These insights will help determine the technical configurations required to ensure optimal performance
for your site.

Tailor the features to your target audience.

Consider your target audience and their specific needs to enhance their engagement and satisfaction.

For instance, if you are targeting a younger audience, integrating social media would be highly relevant.
If your target audience is international, creating your site in multiple languages may be essential, or
offering content translation could be a wise choice.

Consider the future of your website and its scalability

Your business or needs may evolve over time. Ensure that the features you choose are scalable,
allowing you to update or expand them without having to rebuild the entire site.
Second Step: Analyze the different options
When you embark on creating a website, one of the major decisions you will have to make is the choice
of the technical solution that will underpin your project. This choice will determine how your site will be
developed, managed, and evolve in the future. Then, if necessary, you will need to select the provider
with rigor, who will lead the creation of your website.
The various technical solutions for creating websites

Let’s explore the different technical approaches that are available to you, each with its own advantages
and disadvantages:

Custom development
Custom development involves creating a website from scratch by writing specific code for each
functionality. This approach provides a high level of customization and control, as every aspect of the
site can be tailored to your exact needs. It is particularly suitable for complex, large-scale websites.
Advantages:
 Complete customization: absolute control over the design, features, and user-friendliness of your
website.
 Adaptability: design of features specific to your business or industry.
 Scalability: the ability to scale your site as your business grows.
Disadvantages:
 High cost: Custom development is typically more expensive due to the time and skills required to create
custom code.
 Longer timelines: Building a custom site can take longer than using pre-existing solutions.
 Complex maintenance: You are responsible for managing, updating, and securing the site.

Content Management Systems (CMS)

Content Management Systems (CMS) are pre-existing platforms designed to simplify the creation and
management of websites. They provide a variety of pre-defined templates and features, as well as the
ability to add extensions to customize your site.
 Page 12 of 39

Some examples include WordPress, AEM (Adobe Experience Manager), Magento (for e-commerce),
Drupal, Joomla, and more.
Advantages:
 Ease of use: CMSs are user-friendly and suitable for individuals without deep technical knowledge.
 Time-saving: Faster website launch using pre-existing templates and features.
 Community and support: Popular CMSs like WordPress have a large user and developer community,
providing easy access to support and extensions.
Disadvantages:
 Customization limitations: You may be restricted in modifying certain aspects of the site.
 Security: CMSs are potential targets for cyberattacks, so you must be vigilant about security.
Going further
→ Choosing the Right CMS: A crucial step in your web strategy

Website Builder Platforms

Website builder platforms are online tools that enable anyone to create a website using pre-designed
templates and features. These platforms are typically designed for beginners or those in need of a
website quickly.
Some examples include Wix, Squarespace, and more.
Advantages:
 Ease of use: Easy for beginners to navigate.
 Quick deployment: Websites can be created within hours, or even minutes in some cases.
 Affordable cost: Often less expensive than custom development or using CMSs.
Disadvantages:
 Customization limitations: Difficulty in tailoring the site to specific needs.
 Limited control: Less control over technical aspects and site management.

The choice among these various technical solutions will depend on your needs, technical skills, budget,
and long-term goals.

Internal or External: Choosing a Web Service Provider

When the time comes to create or update a website, you’ll need to decide whether to handle the
project internally or engage an external service provider. This decision will have a significant impact on
how your website is developed, managed, and evolves over time.

Each of these approaches has its advantages and disadvantages.

Internal Team: In-House Management of Website Creation

Managing your project internally can be an excellent way to control costs while overseeing direct
website development.

Advantages:
 Total control: You have absolute control over every aspect of the project, from design to maintenance.
 Direct communication: Project management is streamlined and immediate with your team.
 In-depth knowledge of the company: Its needs and goals.
Disadvantages:
 Page 13 of 39

 High cost: Hiring, training, and maintaining an internal team can lead to significant expenses in terms of
salaries, benefits, and infrastructure.
 Skills limitations: In certain areas of web development, this can result in delays, costly errors, or the
need to outsource.
 Lack of flexibility: The internal team may face workload peaks and periods of underutilization, resulting
in inefficient resource utilization.

In-House Web Design vs Freelancer vs Agency

External web service provider: engaging external experts

If you lack internal resources, as is the case for most businesses, you will have no choice but to opt for
hiring freelancers or a web agency, provided you select them carefully.

Advantages:
 Specialized expertise: You have access to specialized skills and deep experience.
 Cost savings: Often more cost-effective than an internal team because you only pay for the services you
need.
 Flexibility: Easily adjust team size or services based on changing needs.
Disadvantages:
 Distant communication: which can lead to communication challenges due to geographical distance and
time zone differences.
 Less direct control: You will need to trust the service provider to handle certain aspects of the project,
which can lead to a sense of loss of control.
 Variable response times: External service providers may have other clients and varying response times,
which can impact urgent projects.
Going further
→ How engaging a digital agency can enhance your performance and support your team?

The choice between an internal team and an external web service provider will depend on various
factors, including the size of your company, your financial resources, your technical skill requirements,
and your internal availability.
 Page 14 of 39

Third Step: Evaluate Additional Costs

When embarking on a website creation project, it’s important to keep in mind that the budget extends
beyond just development. These costs can vary depending on the complexity of your project, your
industry, and your specific goals.

Additional Costs Associated with Website Creation

Overview of additional expenditure items to include in your budget allocation:

1. Web Hosting: Essential for making your website accessible online.

Hosting costs can vary depending on the size of your site, the expected amount of traffic, and the
features included in the plan.

Tip: Choose reliable hosting with good customer support, as your website’s performance depends on it.
2. Domain Name: Its purchase is mandatory to acquire a web address for your site.

Domain costs vary based on the popularity and availability of the name you choose, as well as the
registration duration.

Tip: Register your domain name for multiple years to ensure continuous ownership.
3. Maintenance and Updates: Highly recommended to ensure the proper functioning of your website
(content updates, bug fixes, backup management, security updates, etc.). They depend on the
complexity of your site and the frequency of required updates.
Tip: Allocate a budget for ongoing maintenance to ensure your site remains up-to-date and secure.
4. Security and SSL Certificates: Essential if your site handles sensitive information like customer data or
financial transactions. SSL certificates ensure data is encrypted and secure. Some hosting providers offer
free SSL certificates, while others may charge extra for them.
Tip: Invest in an SSL certificate to enhance your site’s security and user trust.
5. Search Engine Optimization (SEO): To improve organic ranking in search engines like Google, you’ll
need to invest in creating quality content (blog articles, copywriting, social media posts, etc.), keyword
research, building links and backlinks, utilizing Google tools (My Business, Voice Search, Lens), and other
optimization techniques.
Tip: SEO is a long-term investment that can generate organic traffic and potential customers.
6. Online Marketing and Advertising (SEA): If you plan to promote your website, you’ll need to allocate
a budget for online marketing, such as social media advertising, pay-per-click (PPC) advertising, and
other online marketing campaigns.
Tip: Develop an effective marketing strategy to reach your target audience cost-effectively.
7. Training and Support: If you manage your website internally, you may need to train your team for its
maintenance. Ensure access to reliable technical support for unforeseen issues.
Tip: Invest in team training to ensure effective use of your website.
8. Other Industry-Specific Costs: Depending on your industry, you may have specific additional costs,
such as software licenses, regulatory compliance fees, or integrations with third-party systems.
Tip: Identify all industry-specific costs at the outset of the project.
 Page 15 of 39

9. Design, Media, and Graphics Fees: In the event that you plan to (re)create a logo, add specific graphic
elements or illustrations to your website, you may also want to include visuals. If they are not royalty-
free, you will need to purchase them from an image bank.
Tip: Be clear on whether the graphic design needs an update to avoid overlooking this potentially
significant budget item.

By assessing these additional and ancillary costs, you will be better prepared to create a comprehensive
budget for your website creation. Make sure to consider these elements when planning your project to
avoid budget surprises in the future.

Website creation cost

Hidden Costs Associated with Unforeseen Expenses
When embarking on website creation, it’s essential to keep in mind that unforeseen circumstances can
arise along the way. These unforeseen events may require additional resources and result in additional
costs that were not originally budgeted for.

We recommend taking a proactive approach to identify and mitigate risks, paying attention to the
following key points:

1. Scope Changes: You may initially plan a certain number of features or pages, but as the project
progresses, new ideas or requirements may arise.
Tip: Establish a detailed project scope from the start to minimize scope changes during the project.
2. Unforeseen Technical Issues: Unexpected technical issues such as bugs, browser incompatibilities, or
security issues can arise at any point during website development.
Tip: Regularly test the site during development to detect and address technical issues as they arise.
3. Project Delays: A common reality, often related to technical issues, delays in content delivery, or
other unforeseen factors.
Tip: Establish a realistic timeline with time buffers to accommodate potential delays.
4. Changes in Legal and Regulatory Requirements: Online laws can evolve, requiring adjustments on
your website to remain compliant, whether it’s related to content, features, or data privacy, for
example.
Tip: Stay informed about potential regulatory changes and ensure your website is adaptable.
5. Security and Hacking Issues: Increasingly common, these may require unforeseen expenses to
protect your site and user data.
Tip: Invest in appropriate security measures from the outset to minimize risks.
 Page 16 of 39

6. Development Cost Fluctuations: Costs may sometimes fluctuate due to external factors such as
inflation, exchange rate changes, or developer rate increases.
Tip: Allocate a financial buffer to address potential cost increases during the project.
By anticipating these hidden costs related to unforeseen events, you’ll be better prepared to proactively
manage your website creation budget by allocating a buffer budget.

Keep in mind that careful planning, clear communication with your development team, and ongoing
project monitoring can help minimize these unexpected costs.

Fourth Step: From Quotation to Website Creation Contract

The quotation is much more than just a financial document; it serves as the basis for evaluating the
quality and relevance of the services offered. Take the time to analyze them on different criteria, and
engage in discussions with your counterparts before making any decisions.

The contract will then solidify the boundaries of your project to ensure the delivery of your website
according to the agreed-upon terms.

The Quotation: An Essential Approach for Comparing Service Providers

To determine your website creation budget most effectively, it is highly recommended to request
quotes from multiple service providers, whether they are freelancers or web agencies. Each provider
may have their own approach, pricing methods, and specific skills.

By obtaining detailed quotes, you can compare the costs, timelines, and services offered by each
provider. Here are the key questions to consider:

 Pricing: Hourly or fixed per project? Costs may vary based on their experience and geographic location.
It should include the phases of website design, development, and testing.
 Skills: CMS, custom development, back-end and front-end development, UX/UI Design, graphic design…
 Customization: Is it possible, or will the site be based on a template?
 Experience: What are their references, examples of past work, team profiles?
 Feeling: Gut feeling is essential; trust your intuition as well.
 Collaboration: Listening and understanding of your needs, availability and flexibility, transparency about
costs, adherence to deadlines, regular progress updates.
Don’t hesitate to ask questions and discuss details with each provider to ensure you choose the one that
best fits your website creation project. Depending on your needs, you can also request a mock-up or an
audit of your current site in advance. This will give you an insight into the skills of the potential
providers.
Communication and mutual understanding will be the foundation for the success of your project.
The Contract: A Key Document for Any Project
The contract is an essential element of any project, including website creation. It is a legal document
that defines the terms, conditions, and expectations between the parties involved, whether it’s you as
the client and the web provider you have chosen.
This key document specifies the responsibilities of each party, timelines, costs, deliverables, and other
aspects of the project. A well-written contract protects both parties by ensuring that expectations are
clear and obligations are met. It also provides a recourse in case of disputes or disagreements.
Wireframe is developed with content creations, photos and graphics
 Page 17 of 39

What is a website wireframe?

Source: Google.com

A website wireframe is a component-level or block-level mockup of a website page. While it's typically used to lay out
the initial concept of website content at a high level, it's possible to create wireframes using paper and pencil.

Still, in modern times, most web designers and UX designers are sketching wireframes digitally using wireframing tools.
Wireframes provide a coherent outline of the page composition while showcasing possible skeletal procedures of how
users interact with the website.

Why do you need a wireframe?

The process of wireframing has provided the necessary support to create an adequate and efficient visual design to
make a website function as anticipated. Wireframes are easy to revise and don't take too much time to build.

Wireframes can typically have a low and high fidelity look and feel from a pragmatic approach to ensure that the
elements and functionalities are positioned based on the client's requirements and user needs.

Wireframes are very important and have a direct rational impact in the design phase. Below are some reasons why
you should use a wireframe:

1. Showcase A High-Level Visual Website Architecture

A wireframe enables you to create a visual design that can help the client focus on information hierarchy, content, and
website structure in the early stage of the design process without getting distracted by colorful web elements and
other related components. Wireframes are simple and easy to comprehend since they convey a robust skeletal design
of the web page content. These wireframes taken together should provide a thorough overview of our complete
product. Wireframes often use a basic color scheme limited to gray, white, and black. Using generic fonts and basic
shapes is also a thing to make it easy to understand.

2. Communicate Better with Your Client

Wireframes can help you visually communicate with your client. There are instances when misunderstanding can
happen while designing and developing a website. Often, clients won't understand website jargon such as "hero
 Page 18 of 39

image," "calls to action," or "rotating sliders. “Wireframes can help you explain these things to the client and allow you
to understand better what the client wants to achieve.

A wireframe can help clients visualize the possible outcome of the website before it even develops. At a high level,
creating a wireframe for specific features will help you explain a particular component or functionality without
overwhelming your client with too much information.

3. Gather Feedback

Gathering feedback from clients is very easy to do with wireframing. While feedback can be hard to take, it is
imperative to learn the flaws and misunderstandings that may occur in the design process before it even proceeds to
the next phase. A good design can only be perfected through consistent correction from the stakeholders. Getting
client feedback early in the design phase will let you avoid agonizing revision and time-consuming processes later on.

4. Save Time

In essence, creating a wireframe setup some stylistic conventions that can avoid future pitfalls and save time in the
design process. An engineer starts with a building blueprint before taking any necessary steps to build it. In the same
way, wireframing should not be skipped because it provides a visual blueprint of the overall hierarchy and potential
look and feel of the website.

To summarize, wireframes ensure that you save more time in:

 Deciding which components or elements to place in a specific position.

 Avoiding pitfalls and time-consuming revisions.
 Usability testing issues.
 Set expectations for the website's outcome.
 Clear some misconceptions and misunderstandings about the website's overall architecture.

Best Wireframing Tools

In the past, wireframing is traditionally done using paper and pencil alone. But with technological advancement, many
wireframe tools/software have been built to simplify the process. These tools are constructed primarily to create quick
rough outlines or to make highly visual wireframe webpages or screens similar to a fully functional website or
application.

Below are some of the popular wireframing tools available online:

 Page 19 of 39

1. Figma

Figma is a free, robust cloud-based design online and desktop application that enables you to create a block-level
mockup and UI components for a desktop, tablet, or mobile wireframe. With its powerful interface, Figma has a built-
in feature that presents how each element responds to different viewports or screens, making it easier to adjust design
elements for other devices.

In addition, It allows you to create artboards in one panel using shapes, typography, and images. Figma will enable you
to create wireframes and prototypes without exporting designs to another software or application.

2. Adobe XD

Adobe XD is yet another best design software available to create a wireframe and prototypes. It offers easy-to-use site
maps, flowcharts, wireframing interfaces, and components that work with other popular Adobe Products such as
Photoshop and Illustrator. If you've used some other Adobe Products before, you will be familiar with the setup and
tools inside Adobe XD in a short amount of time.

At the top of the conventional feature of a usual design platform, Adobe XD sets the bar high by providing tools for
auto animation, voice triggers, and other collaborative tools.
 Page 20 of 39

3. Axure RP

Axure RP is one of the leading tools for creating requirement specifications, wireframing, and prototyping interfaces
used by Fortune 100 companies. Using its interactive features it can generate interactive HTML wireframes, advanced
interactions, and UI mockups with its own wireframes. It is packed with many helpful features such as animation,
cloud storage, and even CSS exporting that can be utilized in web browsers or mobile devices.

4. Balsamiq

Balsamiq is probably one of the most straightforward wireframing tools for designing and sketching concise ideas for
products such as websites and mobile apps in skeletal format. It offers a drag-and-drop feature with several
wireframing and prototyping interfaces styled with a hand-drawing look. Balsamiq is best for the non-technical person
who wants to create simple, compelling mockups using simple graphics half the time.
 Page 21 of 39

5. Mockflow

Mockflow is yet another simple and unsophisticated online wireframing and product design tool with a clean and
inherent interface. It provides all the necessary tools, from wireframing to usability testing, with a real-time
collaborative feature for your team.

Mockflow is very easy to use. You will create designs and wireframes the moment you open the application using its
easy-to-understand visual tools in an organized manner. The best thing about this Mockflow is that it allows you to
export your design in PNG, HTML, Word, and PowerPoint format.

How to Create a Simple Website Wireframe

Assuming that the project stakeholder

did all of the necessary gatherings of
information and planning and agreed
with a simple one-page type of user
flow model with no advance interaction,
it's now time to move on to the low
fidelity wireframe process.

Creating a wireframe is similar to

creating a blueprint of a building. It may
be time-consuming if not carefully done,
especially if you misunderstood the
client's business requirements and
goals. Nevertheless, creating a
wireframe doesn't mean you already
know all the text and details to put into each website's component or block, such as the navigation, header, etc. This
information will require more discussion and exploration with the design/development team and the client, so it's
better to block out space, use some dummy placeholder and mock text, and move on.
 Page 22 of 39

In summary, the website's content supports one primary task: to showcase the client's business information that the
website visitors must learn more about. Our example website shall have the following website components:

 Navigation
 Header
 About Section
 Company Staff Section
 Call to Action Section
 Footer

Now it’s time to create the wireframe. In this example, we’ll create a simple website wireframe using Mockflow.

You could sign up here for Mockflow https://www.mockflow.com/signup/

Step 1: Setting up the browser frame

Drag and drop the Browser Frame component into the canvas using a Hand Drawn UI. You can change the height of
the Browser Frame component by pulling up the lower part of the frame to the bottom.

Step 2: Adding the Logo and Navigation

Next, using the Label component, let's create the logo, which will be positioned on the upper left side of the Browser
Frame.
 Page 23 of 39

Use the Link Bar component to create the navigation items on the upper right of the Browser Frame.

Step 3: Creating the Header

Drag and drop the Placeholder component to the left side of the Browser Frame below the logo.
 Page 24 of 39

On the right side of the Browser Frame below the navigation, drag and drop the Label component for the dummy
header text and use the Mock Text component for the dummy paragraph text.

Step 4: Creating the About Section

On the left side of the Browser Frame below the Header section, copy and paste the dummy header text and the
dummy paragraph text from the Header section and arrange it accordingly.
 Page 25 of 39

Use the Placeholder component again to create an image box on the right side.

Step 5: Creating the Company Staff Section

Below the About section, let’s create and center a dummy header text and a dummy paragraph text using
the Label and the Mock Text component.
 Page 26 of 39

Next, use the Profile / User component to create three image placeholders for each company staff and use
the Label component for the names.
 Page 27 of 39

Step 6: Creating the Call to Action Section

Use the Label and the Mock Text component for the Call to Action section to create the dummy header and
paragraph text.

To finish off this section, use the Button component to create a clickable link in the middle portion.

Step 7: Creating the Footer Section

For the Footer section, use the Label component to create a simple copyright text.
 Page 28 of 39

Once done, the final wireframe should look like this:

 Page 29 of 39

What are the different types of wireframes?

There are three main types of wireframes: low-fidelity, mid-fidelity, and high-fidelity. The wireframe
fidelity refers to the level of detail in each design.

Let’s look at these more closely:

Low-fidelity wireframes

Low-fidelity wireframes usually serve as the design’s starting point. As such, they tend to be fairly rough,
created without any sense of scale, grid, or pixel-accuracy.

They include only simplistic images, block shapes, and mock content—such as filler text for labels and
headings.

Low-fidelity wireframes are useful for starting conversations, deciding on navigation layout, and
mapping the user flow. They’re ideal if you have stakeholders or clients in the room and you want to
sketch something up with a pen mid-meeting.

They’re also incredibly useful for designers who have multiple product concepts and want to quickly
decide which direction to take.

Mid-fidelity wireframes

The most commonly used, mid-fidelity wireframes feature more accurate representations of the layout.
While they still avoid distractions such as images or typography, more detail is assigned to specific
components and features.

Varying text weights might also be used to separate headings and body content. Though still black and
white, designers can use different shades of gray to communicate the visual prominence of individual
elements. Mid-fidelity wireframes are usually created using a digital wireframing tool, such
as Sketch or Balsamiq.
 Page 30 of 39

Source: Katherine Lu’s portfolio

High-fidelity wireframes

High-fidelity wireframes have pixel-specific layouts, and may include actual featured images and
relevant copy.

They are ideal for exploring and documenting complex concepts such as menu systems or interactive
maps.
 Page 31 of 39

Sitemap and mood boards are developed based on design

Source: Google.com

A sitemap is a design tool that lays out the organizational chart of your website’s pages. It’s
a blueprint of how the site’s overarching structure will flow.

WHY DO YOU NEED A SITEMAP?

When it comes to choosing website pages to include in your site, it’s easy to fall into the
trap of “give me the basic five” (meaning Home, About, Services, Portfolio, Blog, and
Contact). That might work for some businesses that are just starting out, but chances are
your clients might want more from you so they can know, like, and trust you just from
visiting your site. (This will lead them to inquire more about your business or convert into a
sale!!)

A sitemap will help make your website top-notch, so it actually converts visitors into
customers! Here’s how:
 Page 32 of 39

SITEMAPS ARE ALL ABOUT FUNCTIONALITY

Imagine that you’re building a new website for your brand. You already have a gorgeous
logo and color scheme in mind. Yet, you still need to decide which pages your website will
have. Let’s say you have three main packages of services. You’ll need to decide:

 Does each package need its own page of info?

 Does each package need its own page of testimonials?

 What about a Press page? A Portfolio? Or any others?

The answer is that you probably don’t need all of these pages, but it could be a “yes”
depending on the types of packages you offer and who you are offering them to.

If people can’t figure out how to work your website or quickly (and easily) find the
information they’re looking for, they probably won’t stick around on the site too long. Your
bounce rate will likely be high, which you’ll be able to see in your Google Analytics
dashboard .

All your gorgeous design work goes to waste if your site isn’t navigable!

Starting with a sitemap is crucial because it helps ensure that your design work is built
around functionality.

A SITEMAP FOR YOUR WEBSITE SAVES TIME AND MONEY

Websites are an investment. Doing things strategically from the start (AKA planning your
website with a sitemap) will get you much more of a return on those dollars.
 Page 33 of 39

We plan your sitemap based on current analytics and by getting into your customer shoes.
Additionally, we look at things from the eye of a customer that already knows you, and from
one that knows nothing about your brand. We consider what information visitors will need
to convert on your site and how we can build that information into the sitemap’s flow.

Let’s say you don’t start off with a sitemap. You then get deep into the design process and
realize your website isn’t set up in a way that’s intuitive to what your site’s visitors are
looking for. Or, maybe you have a website that’s been done for some time, but it has a high
bounce rate. Maybe it was thrown together haphazardly in the first place.

A sitemap can help prevent and/or fix these situations. It helps ensure you won’t waste time
building a website that isn’t effective in the long run.

To put it simply: more hours spent on your website = more money you have to pay . If you
can cut out some of those editing hours (by taking time to develop a sitemap), you’ll save
yourself some extra time and money!

A SITEMAP KEEPS YOU FOCUSED

Working on a sitemap allows you to stay focused on the goals of your site. You get to really
hone in on discovering what information and messaging are you trying to convey.

We’ll consider things like: What is your customer’s journey before they submit an inquiry?
How can we create the spaces where your customers learn, become inspired, and
then Engage?

We totally understand: it’s tempting to want to dive right into the design parts of your
website.

Thankfully, a sitemap takes away those distractions. It allows you to build on your website’s
goals, intentions, and/or purpose without having to worry about all of these other things
(which will come later on)!
 Page 34 of 39

A SITEMAP MAKES YOUR WEBSITE MORE EFFICIENT AND EFFECTIVE

Planning out your website via sitemap gives you a strategic advantage. How? Well, it allows
you to set up your site in a way that is more likely to lead to conversions and/or sales by
anticipating how your visitors think and how they’ll interact with your website.

Your website layout is a secret marketing tool!

A sitemap also makes your website more efficient by giving you clarity so you can avoid
having duplicate information on your website. This is because a sitemap helps clarify
the exact organization of your content.

By knowing which information will go on which page, you can avoid bogging your visitors
down with redundant, excessive content. People are way more likely to engage with (and
buy from) a website that’s easy to take in, anyway.

PLUS, the clarity you have on what needs to be completed in terms of the content and
assets per website page doesn’t just help your site’s visitors. It also really simplifies the
process of building your website

Who Uses Moodboards?

Source: Google.com

Moodboards are used by a variety of creative professionals, including graphic designers, interior
decorators, set designers, fashion designers, photographers, and event planners. Basically, anyone who
is developing an object or environment that needs to have a particular “look” often starts with a
moodboard to spec out design elements and color schemes.
 Page 35 of 39

2 Reasons to Make Your Own Moodboard

A moodboard has two main purposes:

1. It helps you refine your ideas. Perhaps you are starting from a blank slate and you want to find
inspiration. Perhaps you already have a strong idea but want to affirm to yourself that it comes
together as you imagine and guide yourself through the many creative decisions ahead. In either
case, a moodboard will give you the clarity you need before you start buying materials or
building elements.
2. It helps you communicate your ideas to others. Usually, a creative professional like a graphic or
interior designer will build a moodboard to present their ideas to a client. From there, the client
will probably give feedback about the suitability of the overall idea or the strength of certain
items on the moodboard over others. They might even choose between multiple moodboards
the designer has used to present different options. A layperson planning their own event or
design project won’t have clients, but they will probably also need to communicate their ideas
to someone else at some point — a contractor, collaborator or, if it’s a wedding, their fiancé/e.
Physical vs Digital Moodboards: What’s the Difference?

One of the biggest choices to make when you start a moodboard is whether you want it to be physical
or digital.

Physical moodboards are the traditional option. Typically, they are laid out on a piece of foam board —
a craft material used for purposes as wide-ranging as building dioramas and mounting photographs. Cut
out your images neatly and stick them to the board with spray adhesive for best results. You might layer
the images on top of each other so they completely cover the board; if you prefer more of a neat grid
layout with gaps between items, consider painting the board in a color that matches your chosen
palette. Alternatively, a cork pinboard with pins can be a stylized way to display your inspiration.

Digital moodboards are a contemporary solution. They allow you to easily incorporate images you’ve
seen on the internet or objects you’ve photographed digitally. A number of online platforms offer you a
way to bring these images together. Some common ones are:

 Pinterest. This social media platform lets you easily bring together images into themed “boards”.
It is particularly good for discovering new images, so you will want to use it in at least the
research stage. Another advantage is that many people are familiar with the platform, so you
can easily collaborate with others.
 Canva. Canva provides online graphic-design tools that offer a free alternative to expensive
industry software. Its moodboard maker has an easy-to-use drag-and-drop interface and several
template options. The clean layout makes it a professional-looking option for presenting your
work to others.
 Milanote. This is another good browser-based app. It packs some handy additional features, like
the ability to add videos and gifs, font files and text notes to explain your thinking.

How to Choose Your Moodboard Format

To decide whether to make your moodboard physical or digital, consider:

 Page 36 of 39

 Are the clients or people you’re communicating with local or remote? If they’re far away, a
digital moodboard that you can email to them or share a link to will be more practical.
 How important are textures to you? If you think your ideas are best conveyed by real fabrics and
materials that a person can feel with their fingers, a physical board might be the choice for you.
 Where are you collecting most of your moodboard items from? If you tend to spend a lot of
time online, all the while saving images that inspire you, go digital. If you love reading magazines
and already have a stack of them to work with, go physical. Play to your strengths.

Step-by-Step Guide: Make Your Own Moodboard

There are three steps to making a moodboard:

1. Brainstorm your theme. You probably have some ideas in mind from the get-go. Now
brainstorm some keywords associated with these ideas — for an interior design project, you
might zero in on the style (modernist, Scandinavian, tropical), materials (concrete, ash wood,
rattan) or color (mustard yellow, blush pink, forest green). This will help you with online image
searches — try Google but also Getty, Unsplashed, Pinterest and Instagram. If you’re not drawn
to a particular idea yet, just sit down with an industry magazine or book, let your eyes roam and
take note of what resonates. You’ll soon find inspiration.
2. Collect your elements. Take your early sources of inspiration, then challenge yourself to think
outside of the box to find more. Movie mise en scene, fashion editorial shoots, vintage
illustrations, art works, fabric and color swatches, architecture, objects and clothing can all be
good moodboard fodder. Don’t disregard typography either — an old-style serif font will have
very different connotations to a clean and contemporary sans-serif style, and this makes it a
great tool for you to showcase some keywords or relevant quotes.
3. Review, curate and present your board. Odds are, you now have more material than is useful.
Curate by choosing images and samples that come together harmoniously, building in some
breadth to reflect your originality (or increase your chances of appealing to the client, if you’re
working with one). A cohesive color palette is important, so discard anything that clashes. If
you’re making a digital board, consider eye-dropping five key colors from the images into
swatches. If you’re making a physical board, obtain real paint and fabric swatches for the same
effect.

Teachers Activity:
Ask Question
Show Presentation
 Page 37 of 39

Demonstration
Show video:
https://www.youtube.com/watch?v=pgmrQdapGpQ
https://www.youtube.com/watch?v=6gBu-1GO0cc

Reference:
Site:
https://www.google.com/
https://www.youtube.com/
https://www.primalspace.co.uk/client-requirements-website-design/
https://en.wikibooks.org/wiki/Web_Development/What%27s_needed_to_develop_a_website
%3F#:~:text=Four%20basic%20things%20are%20needed,to%20learn%20and%20get%20into.
https://eminence.ch/en/website-creation-cost/#gref
https://www.ramotion.com/blog/wireframe-in-web-design/
https://careerfoundry.com/en/blog/ux-design/what-is-a-wireframe-guide/#:~:text=In%20simple
%20terms%2C%20wireframes%20are,%2C%20visuals%2C%20or%20specific%20content.
https://marketing-queen.com/2020/09/what-is-a-sitemap/

eBook:
 Responsive Web Design Techniques by: Abdelaziz I. Hammouri
 Responsive Web Design with HTML5 and CSS3 by: Ben Frain

Assessment 8-1:
Written Test

Test I: Question and Answer

 Page 38 of 39

A: What are website resources?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

B: What are human resources?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

C: What are capital resources?

_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________
_____________________________________________________________________________________

Activity 1

Objective: Create a basic wireframe using Mockflow.

Steps/Procedure: Group

1. Refer to Lesson 8 about how to create a wireframe using Mockflow.

2. Create your own design and lay-out.
3. Discuss your design to the class.

Make sure you have a copy of your wireframe for future reference.

Activity 2

Objective: Create a basic sitemap

Steps/Procedure: Group

1. Identify your website categories.

2. Organize your categories.
3. Add structure and hierarchy.
4. Start planning your content.
5. Add rough written content.
6. Add example images.
7. Sketch the page layout.

Discuss your own sitemap to the class.

Page 39 of 39