Steps to Design Your Web Page
This document is a resource for teachers to use in the classroom for web development projects. Within this document are six suggested steps to creating and designing a website.
Each step contains the following:
- Explanation: what is involved in this part of the design process.
- Resources: tools that are available to assist.
- Example: uses the Code Avengers homepage as an example.
- Task: a related task for students to implement in creating their website.
- Write your copy (text content)
- Draw a wireframe
- Collect other content
- Visual Design Mockup
- Code the layout
- Final implementation
1. Write your copy (text content)
Copy refers to the written material on a web page, in contrast to photographs or other elements of layout. Copywriting is one of the most important elements of effective online marketing. It takes special skill and attention, whether your trying to sell products or services or your just wanting to let people know the latest.
Copywritting involves strategically delivering words whether written or spoken, in a way which gets people to take some form of action ie. persuades consumers to buy goods or services. Creating direct-response copywriting is an art. The science and craft behind it can take much invested time and energy to master. Its no wonder that copywriters are some of the highest paid writers in the world.
Another element to consider when writing the text on a page is the ease with which your content is read and understood by your visitors (i.e. its readability). The readability will determine how much information users digest.
Example:See the copywritten for the Code Avengers home page >>
Resources:10 Ways to Write Good Copy
10 Steps to Effective Copywriting
Task:Write your copy into either Word or Google docs. Google docs is best to use if you are working in teams where multiple people need access to the document for editing.
2. Draw a wireframe
Wifeframing is an important part of the web design process. The wireframe is a visual guide that represents the skeletal framework of a website. It allows you to define the information hierarchy of your design and plan the arrangement of the content according to how you want users to view the information.
The wireframe may include the arrangement of interface elements and navigational systems, and how they work together. They usually lack typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content.
Example:Code Avengers home page wireframe
ResourcesTo create a wireframe, you need a tool that enables you to quickly sketch a page and get feedback from others. It often begins with pencil drawings or sketches on a whiteboard. Then by using one of the many wireframe software tools like mockflow, moqups etc, more detailed sketches can be created through collaboration.
Moqups free Plan offers 2 active projects and 5MB of storage.
Try Moqups >>
Mockflow free package includes 1 Designer License, 1 Project in each App, 2 Co-Editors per Project, 1 GB of Cloud Storage and Project Restrictions.
Try MockFlow >>
Task:Using one of these online tools, create the wireframe for your website.
3. Collect other content
The content of a web page is the reason that people come to your page and includes the text and multimedia content that is encountered as part of the user experience on websites. Multimedia includes, among other things: images, sounds, videos and animations.
Images: images are the most commonly used multimedia on webpages. They add interest to the page and help decorate an article. Images on a webpage should be optimized so that they download quickly.
Sounds: sounds are embedded onto a website so that users hear it as they enter into a website. Be careful when using sounds however, that they don't distract users from the main purpose of the page. It is best to provide a way to turn it off easily.
Videos: this multimedia is becoming more and more popular. The main challenge to using videos in webpages is having it work reliably across different browsers.
Animations: animations should be used in moderation.
Example:Code Avengers homepage multimedia
Resources:Guide to Content Strategy for the Web
TaskCollect any multimedia for your page and place into a folder.
4. Visual Design Mockup
Visual DesignThe visual design of the webpage focuses on the aesthetics of a site by strategically using lines, shapes, color, texture, typography and form to engage users. By applying principles of visual design such as unity, gesalt, space, hierarchy, balance, contrast, dominance, scale and similarity, we are able to create a clear visual hierarchy of contrast, so users can see at a glance what is important and what is peripheral on our webpages.
MockupsA mockup is a realistic, middle-to-high fidelity, static design representation of what the product will look like, in this case the website. Very often a mock up is a visual design draft. The goal of a mock up is to show, a close as possible how all final appearances will render including the structure of information, the visual aspects such as typography, color choices, images etc, and the basic functionalities in a static way.
Example:Code Avengers (homepage) visual design mock up.
ResourcesTry Now >>
Try Now >>
Try Now >>
TaskUsing one of the tools online, draw a visual design mock up of your website.
5. Code the page structureThe web page is built using HTML, which defines the structure of the content.
Using page sections and elements such as
<article> etc, we can set up the structure and styling of our web page. This is the way we can easily group related text and multimedia.
Using CSS we can horizontally and vertically position our elements and create white space around them outside (margins) or inside of them (padding).
Example:Section elements in Code Avengers home page:
Task:Using HTML and CSS, create the structure of your webpage. Add margins and padding to align sections to match your visual design layout
6. Final implementation
CodingNow that the structure is set, we can insert all our content into the HTML, adding links and any necessary attributes to our tags. Using CSS we can add any other styles to the code, so +that our website matches the visual design we created in step 4. Add necessary links so the functionalities of the website are complete.
TestingYou should always TEST the site. Testing is a critical part of the building process of a website. Throughout the design process, test your HTML and CSS, by previewing your web page, to make sure the code is working properly. Check that all functions have been implemented correctly.
*Test that the website layout looks okay in multiple browsers, e.g. Firefox, Chrome and IE.
- Proof read text content for spelling and grammar mistakes.
- Check all links work correctly.
- Check all images are displayed correctly.
- Validate code using the W3C validator (optional for level 1).
Example:View the final implementation of the Code Avengers Home Page >>
Task:Now code the rest of your website and insert the content into the HTML. Add CSS styles to create the visual design you created. Finally test all the functions of the web page by previewing it in the browser. Make any final changes.
- new file
- upload media
Find & replace Ctrl+F+F