D's Blog Feed

A place for inspiration, not only about design, but also about traveling, art, trends, and just interesting and curious finds. 

Get the inside scoop! know how to create the perfect website for your brand's needs and stay within budget! A 3 part series

 

Knowledge is power, right? But when you’re so busy getting your business off the ground, figuring out where to start on creating a website can be overwhelming: the weird tech words, the mysterious process, and the cost! That is why I created this post series, to help entrepreneurs like you understand what it is all about, so you can find the right service, hire the right professionals and most importantly, know what to ask for to avoid waiting time or money.

3-part series

Here you are: you have a company, a brand, maybe even have a “temporary” landing page, but now you’re ready to grow, reach bigger audiences, get investment, or enter new distribution channels; and have realized your brand needs to have a better online presence.

This is the situation I see the most often as a designer, and you’re right. A brand’s presence online is a key element in every business’ communication plan. If done right, it can be an invaluable asset, so you need to make sure your website is fulfilling your needs and connecting your brand to your ideal customer.

This post series will give you a breakdown of the process, so you can take the right steps towards a successful website project. See it as a general guideline of what a website project involves and what you need to consider:

  1. PART 1 » Will explain everything you need to know about the right type of website for your needs, what to quote, how to understand those proposals, etc.
  2. PART 2 » Covers the design process, from user experience – where I’ll explain all those weird words like sitemap and wireframes – to user testing and the visual design.
  3. PART 3 » Is all about development. This is a general overview, you’ll not learn how to code here (oh no, no, no), but know when to work with a developer, what to expect, and what to consider once your website is up and running.

Let’s get started!


Part One (1)

It all starts with you

Like any other design project, the first thing you need to do, before you even think about calling somebody for a quote, is to figure out these 3 things:

1. What’s your budget

How much are you willing to invest on this? Is it a fixed budget or do you have some wiggle room? Run your numbers first, so you have a place to start.

2. What’s the objective

You need to figure out what’s your website’s objective. Why do you need one? A good exercise is to visualize a user visiting your website: what is the main task should he/she accomplish while they’re there? What’s the first thing you want them to learn or get? What are the secondary tasks? Write down the website’s objectives in order of priority. You really need to think what the role of this website is in your business or communication plan.

3. What type of website do you need?

You’re probably asking yourself “are there different types?”. The answer is a big YES! Each type of website behaves differently and has different design needs, therefore different costs. Knowing the differences and answering question #2 above will help you figure this out:

A) INFORMATIONAL WEBSITES
It’s probably the most common type and its objective, as the name suggests, is mainly to provide information. When visiting an informational website, the user’s primary objective is to consume information, to learn about your brand, product or service. Most informational websites will also encourage users to take specific actions, like signing up to a mailing list or get in touch through a contact form or social media, but those are secondary tasks.

B) E-COMMERCE WEBSITES
Some people consider e-commerce websites as informational websites, but I like to put them in a different category, because in this case, the primary objective is not only to consume information about the brand, product or service, but also to purchase it directly. You want users to act and order something. That requires a different approach to the navigation, and a different way to construct the website as well.

C) WEB APPLICATIONS (WEB APPS)*
Their primary objective is to allow users to perform specific interactive tasks that solve the user’s problem or need. Most likely, users will come back and perform these tasks over and over, not just one time. Web apps require a high level of interaction with users. Examples of web apps are Trello, Google Drive, Basecamp, and Dropbox, among others.

*NOTE:
Web apps are different from native apps. Native apps are applications you download to your phone through an online store, such as the Apple store. They’re stored and live in your phone. Web apps live in the web, like other websites do. You access them through a browser (phone, tablet or desktop) by clicking a link or typing the URL. Native apps and web apps work differently, so even though a web app could eventually become a native app, that only happens with extra work from the development and design team. They are not interchangeable.

If you still aren’t sure what type of website you need, don’t worry, explain it to your designer. We’re more than happy to guide you. And if you want to get ahead and make us extra happy, you can fill out his Creative Brief Template. With this handy information, designers like me will be able to give better advice and a more accurate estimate.
 

Ready? Let’s request a quote, or maybe 2 or 3


It’s always a good idea to get recommendations, and remember that it’s your right to get quotes from a few, so you can make an informed decision and find the right fit for your project. Make sure you give them all the information you gathered answering the questions explained above.

Depending on the type of web project, some designers (including me) will partner with developers. Most of the time, websites that use services with pre-existing templates and drag and drop functionality, like Squarespace or Shopify, don't require a developer, but websites done from scratch (fully personalized) and web apps, will most likely require that partnership. So, depending on your budget, web type and objectives, the designer will create a proposal to fit your needs.

What to expect on a proposal:

A) THE WEBSITE'S OBJECTIVE & PRIMARY USER TAKS
This will be the corner stone of the project and will most likely come up again when key design decisions need to be made. This will be based on the information you provide.

B) A PRELIMINARY SITEMAP
A sitemap is basically an outline that describes your website’s basic structure, like the ones done for essays, where the primary content for each chapter is listed.

Sitemaps can be done as a list or as diagrams, but it must show how many sections the website will have and how many sub-pages will be included under each main section. It can also include notes about call to actions (C.T.A.), type of content, and links between internal pages or external websites.

Most likely, the first draft of the sitemap, done for the proposal, will be very general and simple, but when the project starts, this sitemap will become more detailed.

SITEMAP EXAMPLE

SITEMAP EXAMPLE

C) REQUIREMENTS
Most proposals will require the client to provide all the content before the design process starts, which includes text and images. In some cases, if the content isn’t available, the designer can use placeholders, but at some point, you will need to provide all the content needed.

I recommend gathering all the content early on, because it makes the design process more efficient and you’ll know what you are missing, so (if needed) you can hire a copywriter and/or a photographer.

D) ITEMIZED QUOTES
Costs are usually listed by type of service or design piece, and each service includes a maximum round of revisions, a maximum number of design templates or pages, the project's timeline (schedule), and the client’s responsibilities. All this affects the cost of the project.

Make sure you read the quote carefully. It might include separate costs for design and development (if applicable), and might include add-on services such as maintenance, hosting, stock image search, personalized graphics (like infographics), and copy editing. It might also indicate if the designer will purchase the stock photography, billing it later as an expense, or if the client will directly pay for it. Most proposals will handle web projects as flat rates, but they might also include an hourly rate for “out of scope” needs.

Most designers and developers will require you to approve and sign the project's proposal (quote), as well as a contract (also called service agreement), and they will most likely require an advance deposit.
 

Done with Part One! The next post will be the more fun, because I'll explain the design process. That’s where the magic lives...