Loading presentation...

Present Remotely

Send the link below via email or IM


Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.


How to Design a Website

No description

Doug MacKenzie

on 29 November 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of How to Design a Website

Find out what you can about your client and their business
The first step when creating a website is to do some research.

Some of this research will be done with the client to get an understanding of their needs

AKA Client Interview

Other research will need to be done separately to learn more about your client's specific industry

1. Research
The way to get good ideas is to get lots of ideas and throw the bad ones out!!
Once you know what the project is all about get some ideas together.

Brainstorming is an ideal starting point.
2. Brainstorming your ideas
Storyboards can be mock ups using design software or image editors like Photoshop
Storyboard the pages of the website where there will be layout changes (no need to storyboard every page if the layout is the same). Use the wireframes as your guide

Pay particular attention to the Navigation Design. Include a Navigation Map

The focus of the site design should be to present the content

Add Graphics to the layout using Photoshop or the like to build up an image of what the final pages will look like

Seek approval for the design from the client
6. Design the WebSite
Decide on the Technology now as it will impact on development time and cost
How will the site be structured and what technology will be used?
3. Sort out Technical Requirements
How to Design a Website
10 steps for designing & building effective websites
An outline helps organise the project and is useful to refer to later to keep the project on track, while dealing with the inevitable requests for change.

Write an outline of a website which should include
a list of each section to be included on the site
a description of what type of content will be shown on each page.

It should also describe in as much detail as possible what features would be on the site,
such as user accounts,
social networking functions,
video or audio
newsletter sign-up.
4. Create an Outline
5. Create Wire Frames
Wireframes remove the distraction of other visual elements allowing you to concentrate on the content
Wireframes are simple line drawings of website layouts that allow you (and the client) to focus on placement of elements rather than colour and type.

This helps determine what content deserves the most focus and its percentage of the space on the page.

Client approved wireframes provide a framework for your designs.
Software such as Adobe Dreamweaver can help a designer turn a mockup into a working web page
When your design is selected and approved by your client, the design needs to be turned from page mockups into web pages written in HTML and CSS.

Graphic content needs to be included into the page. Text content needs to be supplied by your client. If not available however, you can always fall back on lorem ipsum

Experienced designer/developers may choose to take on all the coding, while someone focused on the design side of the web may work closely with a developer to bring the site to life.
7. Build the Web Site
What to ask your client
Brainstorming your ideas
The Goal of Brainstorming is to come up with ideas that cover:

Overall concepts and styles
Colour schemes
Typeface options
Project goals
Ideas related to the mood or emotional feel of the work
And so on...
Who do you Brainstorm with
Other designers and creative professionals
The client
People in an industry related to the project
At the start of a project, it is important to know what to ask your clients so as to gather as much information as possible.

This meeting will most likely occur before you have landed the job. Things you need to know

Who is the Target Audience?
Internal or External
Age, Gender
Geographic location
What is the message?
What are the Project Specifications?
Colour Scheme
What is the Budget?
What is the Deadline?
When you're done, filter the ideas and select your preferred one.
Basic HTML/CSS/JavaScript
Database driven with php/asp back end
Development Framework
Content Management System
Mobile Responsive

This will determine the build software and the supporting infrastructure needed to make the site work.
Will the site be built using
What goes in an Outline
For a website project, include each section of the site with a detailed description of the content and pages. It is important to know how many unique designs and layouts you need to provide.
What goes in an outline
How to use the Outline
Help determine the estimated cost and timeframe of the project
Include it in the Proposal
Helps keep the project on target
What goes in to a WebSite Proposal
Outline of Content
The proposal should clearly state what will be included on the site. You can do this in a standard outline format, or visually, to show what sections and features you intend to build
Method of Building The Site
Describe the technology that will be used to build the site
Hosting plan including costs for the expected site content and volume of traffic
The plan and costs for ongoing maintenance. Includes both technical server maintenance and ongoing content maintenance. Who will be responsible for which part.
Time Frame
Length of time the project will take to complete. Can include deadlines for milestone deliverables & progress payments
Estimate of the costs
Total cost to produce including your fee. This can be a point for negotiation with the client and may be budget dependent
At this stage you should set about acquiring your hosting provider. The technology they support will determine what ultimately gets used on the website.
Once your layout is completed in HTML and CSS, it needs to be integrated with the system you have chosen in order to build a functioning website.
8. Develop The Web Site
Websites are only effective if they get visitors. There are millions of websites out there. Promotion is vital if you want visitors to come.
The next task is to promote your website. Driving traffic to a site can include:
optimizing it for search engines.
sending newsletters to highlight new content.
advertising with Google or with banner ads on other sites.
social media campaigns & bookmarking
plus more conventional methods such as print advertising and word-of-mouth.
9. Promote the WebSite
A blog is a great way to keep a site updated, with posts of any length on any topic related to your site
One of the best ways to keep people coming back to your site is to keep the content updated.

With all of the work put into a site, you don’t want it to stagnate for months after the launch.

A Website is a commitment. If you want visitors you need refresh content regularly

Continue to post new content. Visitors will not return if they see unchanged content when they visit your site.

10. Keep it Fresh
This may mean creating templates for a CMS
Creating WordPress/Drupal CMS Themes, etc
Developing server side functionality
Adding sophisticated features to pages
Adding Multimedia elements to pages
Testing the site
Write the Project Proposal Document & Present to your client
Create the Project Proposal
Proposals are an interesting document. They happen before you get the job. They are part analysis document, part sales pitch, part quote. Gauging how much information to put in can be tricky. You want enough to show your prospective client that you are taking their job seriously. However you do not want to spend too much time on the proposal because:

If you don't get the job the time preparing the proposal is all unpaid hours
You don't want to give away too much about your solution in case the client gives your solution to a cheaper contractor

Do three different designs of the site that match the brief. Get the client to select their favourite from the three available.

It doesn't matter if they don't like everything about their selected design as they will be given the opportunity to change part of it later.

They are selecting basic look and layout. Colours, fonts and functionality can all be changed to suit but once you have a structure to work with you can begin building the site
Design Approval
You should offer one round of changes to the design to incorporate the wishes of your client. Don't extend beyond that otherwise you are opening yourself up to lots and lots of nickle and dime changes that will delay the build process and extend the deadline, cost overruns etc.
Full transcript