10 Steps to Effective Web Design and Development

General information

Developing a website can initially be a daunting task, but with all of the tools and resources now available to everyone, having a presence on the web has become commonplace.

This page highlights 10 steps to help you develop an effective website. In addition to this document, visit Lynda Training and once on the Lynda page, search for Web Design Fundamentals. These videos will be helpful in learning the fundamentals of web design. (Visit our Lynda Training page for more information about Lynda.)

10 Steps

1. Think of an idea or topic
  • What do I want the site to be about?
  • Who is my target audience?
  • What information will my target audience need or want to know?
2. Think about your site content
  • Make a list of all the pages to be included in your website (see examples of content)
  • Write the content for each page
  • Convert documents that will be attached to the site (such as resumes, papers, etc.) to Adobe Acrobat PDF files
  • Collect all pictures for the site
  • Organize your files (It may be helpful to create a folder for each page of the site and place the content and pictures in the appropriate folder.)
3. Website Architecture
  • How will a visitor navigate through the pages of your site? Use a flow chart to design the navigational structure of your website
  • Users should not have to click more than two times to find the desired information
4. Design your first page
  • Choose the program(s) you will use to create your site (based upon your skill level and needs)
  • If you choose a program that offers templates and themes:
    • Choose a theme and color scheme
    • Customize the theme and add your own pictures to make your page reflect your personality
    • Organize your content so the most important areas are easily visible (Minimize scrolling and clicking)
  • If you choose a program that requires your design expertise:
    • Sketch out on paper a rough design for your page. A sketch will include areas for content, pictures, navigation, etc.
    • Be creative, but keep it simple
    • Organize your content so the most important areas are easily visible (Minimize scrolling and clicking)
    • Determine your color scheme (Colors are very important. Pick a color scheme with a high contrast. Selecting the wrong colors may make it difficult for visitors to read your content.)
    • Determine your fonts. Choose plain vanilla fonts, such as Arial, Times New Roman, Helvetica, Verdana, Tahoma, and Courier (Using fonts such as the ultra-jazzy "Cloister Black MT Light" font that looks so amazing on your machine may be changed to plain old Times New Roman on your user's machine. The reason? He/she does not have the font installed on his/her machine.) Keep the font size between 10-18 points.
    • Insert pictures to make your page reflect your personality. (Images should enhance the look of a page, but it is not advisable to go overboard in stuffing your page with a truckload of images.)
5. Look at your first page
  • Is it appealing to the eye and informative?
  • Does it load quickly?
  • Is it easy to navigate?
  • Are your grammar and spelling correct?
  • Do you have something people need or find useful?
6. Get feedback
  • Show your page to some friends or colleagues. They may notice something you missed.
7. Create remaining pages
  • Follow your sketch of the navigational structure
  • All of your pages should follow some basic pattern or format
8. Look over the entire site
  • Review each page for design and content
9. Repeat step 6. Looks good? Great.
  • Upload it to your host or local server (see the Personal Web Space page for FTP information)
  • Promote your site. Otherwise, how will people find it?
10. Repeat step 1
  • Web site development is a cycle. It's not a newspaper you publish once and then forget about. Update your site often.

Programs to develop a website

Creating a personal website is not as hard as it seems. You will want to choose the program based upon your skill level and desired features. Listed below are some options, but this list is not exhaustive.

Program Recommended skill level
Features Things to consider
Publishing your site Additional resources
Google Sites No previous web development knowledge necessary Easy way to make information accessible to people. Hundreds of templates to choose from. Easily customizable. Can add a variety of features from other Google applications (without any programming knowledge), including Google docs, Google calendar, YouTube, and Picasa).http://www.google.com/sites/overview.html
Does not publish to your Elon web account, but the site is yours no matter where you go.
Students wishing to create a Google site can create a site tied to their @elon.edu account. Log in through Elon's email page and click on Sites (link at top of page).
Publish through the program's interface; Does not publish to your elon web space Overview
Wiki page
Wordpress
No previous web development knowledge necessary Easy way to make information accessible to people. Hundreds of templates to choose from. Can add a variety of features, including tagging posts, apps for mobile devices to edit on the go, and widgets for flickr, del.icio.us, twitter, tag clouds, and more.
Wordpress was initially just known for a place for blogs, but it's now so much more than that. You can create an entire website and include a blogging feature. Does not publish to your Elon web account, but the site is yours no matter where you go.
Publish through the program's interface; Does not publish to your elon web space Features
Lynda Training (once on the Lynda page, search for WordPress Essential Training)
Blogger No previous web development knowledge necessary Easy way to make information accessible to people. Hundreds of templates to choose from. Primarily used as a blog (personal diary, daily pulpit, collaborative space, political soapbox, breaking-news outlet, collection of links, private thoughts, memos to the world, etc.)
Known primarily as a blog. Does not publish to your Elon web account, but the site is yours no matter where you go. Publish through the program's interface; Does not publish to your elon web space Blogger tour
Video tutorial
Microsoft Expression Web Beginner to intermediate web knowledge; Familiarity with Microsoft Office products is helpful; Some HTML knowledge is helpful
Built-in themes make it easy to create an attractive looking site Only available to Windows users.
Publish through the program; Publishes to your Elon web space
More info
Wiki page
Lynda Training (once on the Lynda page, search for Expression Web Essential Training)
iWeb Beginner web knowledge; Familiarity with iLife suite is helpful
Built-in themes make it easy to create an attractive looking site Only available to Apple users. Publish through iWeb or FTP program
More info
Wiki page
Lynda Training (once on the Lynda page, search for iWeb Essential Training)
Adobe Dreamweaver Intermediate to advanced web knowledge; Design skills and knowledge of Photoshop are essential; Some HTML knowledge is helpful 
Contains many features and tools that allow the designer to have greater control Available to Mac users and Windows users. Software available on Multimedia Stations in Belk.
Publish through the program
More info
Wiki page
Lynda Training (once on the Lynda page, search for Dreamweaver CS5 Essential Training)
[Adobe Flash] Advanced web knowledge; Design skills and knowledge of image creation are essential; Flash action script knowledge is necessary
Contains tools to create an interactive and animated web site Available to Mac users and Windows users. Software available on Multimedia Stations in Belk. Publish through Dreamweaver
More info
Wiki page
Lynda Training (once on the Lynda page, search for Flash Professional CS5 Essential Training)

Examples of Content

Personal Sites Organizational Sites
  • Info about you
  • Pictures
  • Resumé
  • Portfolio work (academic papers, research, presentations, etc.)
  • Links to other sites and your email address
  • Elon web disclaimer
  • Info about the organization
  • History
  • Pictures
  • Members
  • Meeting Times
  • By-laws, rules, regulations
  • Elon web disclaimer (if the site will be housed on elon's servers (facstaff.elon.edu OR elon.edu/student/username)

Was this information helpful? Rate the page.

Your Rating: Results: PatheticBadOKGoodOutstanding! 23 rates

Labels

website website Delete
development development Delete
design design Delete
web web Delete
publishing publishing Delete
expression expression Delete
dreamweaver dreamweaver Delete
tlt tlt Delete
Enter labels to add to this page:
Please wait 
Looking for a label? Just start typing.