Transcript Web Design - TechTipsWarehouse

Blueprint for Planning &
Designing
a
Website
A well-organized website
doesn’t just happen.
-----A detailed blueprint will guide
the decision-making
process.
------
PLAN!
PLAN!
PLAN!
1. Purpose
 Define the purpose of the website.
 Why do you need a web presence?
 What are you hoping to accomplish?
2. Identify your audience
 Identify your target audience and focus on it. The website isn’t
about YOU?
 Ask questions:
 How old are they?
 Men, women, children?
 What are their expectations?
 What is their level of education?
 Where do they live?
 Are they web savvy?
 What kinds of devices do they use?
3. Domain Name
 Choose your domain name and register it with a domain
name registrar
 Define domain name: the part of an Internet URL selected and
registered by an individual, business or organization to represent their
web presence.
 The name will consist of at least two parts, separated by a period (dot).
The last part is the top-level domain code.
Example: microsoft.com
 You can pay extra for private registration, which will keep your name and
contact information private—otherwise it is public knowledge
3. Domain Name
 An exact name match with your company is the best choice
Avoid hyphens
Keep it short, easy to remember and easy to type
Remember the copyright law
Some use the “radio” test.
How will your website name sound in a radio ad?
Top-Level Domain Codes
 These are the most common TLDs. The first three are
available for use by individuals or businesses; the others
require that you meet certain qualifications.
 .com—commercial
 .net—network service provider (can be used generically)
 .org—usually nonprofit but can be generic
 .edu—educational institution—(colleges or universities)
 .gov—state or federal government
 .mil—U.S. military
 .mob—dedicated to delivering the Internet to mobile devices
 .biz—business
4. Budget
 Set a budget and plan accordingly.
 It isn’t just about how much it will cost to build it.
 You also have to consider the time it takes to build it PLUS what it will cost
to maintain it.
--Web hosting fees and domain registration are recurring expenses.
5. Goals
 Prioritize your goals. Determine what needs to go on the
website first—and what can be added as time and money
allow.
 Draw a simple diagram of all the pages you want and how they will
connect to each other
Plan the navigational structure
6. Design the layout
 Design the layout of the website
 Research other websites and make note of the things that you
like
 Decide on the color scheme
6. Design the layout
 Determine screen resolution
 Designing web sites to fit all resolutions is very important, but it
is difficult to create a site that will look exactly the same at
different resolutions.
 The most commonly used in the U.S. now is 1024x768, but a
close second is 1366x768—which actually leads in global
statistics.
7. File naming conventions
 Use a simple naming convention for all files to improve SEO-search engine optimization (increasing the number of visitors
to your site by ranking high in the search results of a search
engine)
 Only using letters, numbers and dashes (or hyphens); do not use spaces or
special characters
 Names should be logical, clear and to the point.
 Examples:
Poor: 11-Aug_lowres.pdf
Better: Wilson-Newsletter-2011.pdf
8. Create the site
 Create navigational structure
 Include a link back to home on every page in a consistent
location
--Use menus (navigation bars) or tabs
 Keep it clean—not cluttered and cramped; include plenty of
white space
 Use small blocks of text
9. Plan Accessibility
 Accessibility means that your site can be viewed by all,
regardless of the device used or the abilities of the
visitor.
 Color blind? Other vision problems?
 Assistive technologies?
 Navigate without a mouse?
 Mobile device?
10. Test the site
 Test the site to make sure everything works properly
before you go live:
 Spelling/grammar check, hyperlinks, browser compatibility, etc.
11. Publish the site
 Publish your website through a web hosting service
 Web Hosting: Making websites available to computers
connected to the Internet.
 Web hosting services are usually provided by ISPs or web hosting
specialists.
 The service will store all the pages of your website and publish it to the
Internet.
 Depending on the choices you made for creating your website, the cost
will range from FREE to low cost for simple websites.
Complex sites (like big companies) are more costly to maintain
11. Publish the site
 Check to see if your service automatically registers
your site with the major search engines like Google,
Yahoo, etc.
 If not, register it yourself. Registration is free and improves
search engine optimization (SEO).
Advantages - Disadvantages
FREE HOSTING
PAID HOSTING
Advantage
Advantages
Free
Disadvantages
Advertising banners
No domain hosting—which means
you typically can’t select your exact
address
Limited features
Little to no technical support
Technical support
Free statistics for evaluation
purposes
Allows domain naming
Disadvantages
Costs money!
However, prices will vary and
economical options are available
Yearly fee for domain name
12. Monitor and evaluate
 Monitor and evaluate your site over time.
 Some web hosting services provide analysis to help you know if
you are meeting your goals.
What options do you have for developing
a website?
 Using web design software
 Dreamweaver, Microsoft Expression Web, iWeb
 Writing the HTML code
 HTML editor (Coffee Cup) or a text editor (TextEdit –Mac or Notepad – Windows)
 Outsourcing to a professional web designer
 Using an online website builder
 Wix, GoDaddy, Yahoo, Google, Weebly
Advantages - Disadvantages
WEB DESIGN SOFTWARE
Advantages
Professional product
Disadvantages
High learning curve
Can be expensive
WRITING THE HTML CODE
Advantages
Customized website
Save money
Disadvantages
Time consuming
High learning curve
PROFESSIONAL WEBSITE BUILDER
Advantages
Professional quality
Search-engine friendly
Technical support and website maintenance
Disadvantages
Expensive
Time consuming
ONLINE WEBSITE BUILDER
Advantages
Low cost – or free
Easy to learn/use/access
Typically includes web hosting
Disadvantages
Limited capabilities
Not appropriate for large projects
Lacks unique quality