If you are planning to design and create a website, it helps to spend some time planning the project. The planning phase allows the developer and the client to work together to identify the format and layout of the site that meets the needs of both. The planning process will affect the style of the site, and is probably the most important aspect of web design work, especially the professional one.
Steps
Part 1 of 4: Build the Basic Structure
Step 1. Determine the functionality of the site
If you are making the site for yourself, you probably already know the answer to this question. If you make the site for someone else, a company or an organization, you will need to understand what the client expects from the site and its functionality. All decisions made at this time will have an impact on the final result.
- Does the site need a virtual showcase? Do you need user comments? Will users need to create an account? Is it a site geared towards reading articles? To viewing images? All of these questions, and many more, will help you plan the design and structure of the site.
- This phase can be exhausting, especially for large companies, when many people are involved in the project.
Step 2. Create a sitemap diagram
A sitemap diagram is like a flowchart, showing how users can move from one page to the next. There is no need for the pages during this phase, just the general flow of ideas. You can use a program to create the diagram, or draw it on a piece of paper. Use the diagram to show how you imagine the hierarchy between pages and their connectivity.
Step 3. Try using "card sorting"
A popular method of working in a team is to use pieces of paper to understand everyone's ideal approach to work. Take a pad of paper and briefly write the contents of each page on each piece of paper. The team will have to organize the slips in the way they think is most useful. This is best done when working with other people to create a site.
Step 4. Use paper and a bulletin board, or whiteboard
This planning method is the most classic, it is used in low-budget projects and allows you to delete ideas, reposition them or redirect them. Draw the outline of the project on pieces of paper, connect them with lines or draw the outline on a blackboard. This method is excellent for brainstorming sessions.
Step 5. Keep a list of the contents
This is more useful when redesigning an existing site than when starting from scratch. insert all existing content or pages into a table. Write down the purpose of each piece of content and use this list to determine what must remain and what must be removed. This process will help you eliminate non-essential elements, simplifying the redesign process.
Part 2 of 4: Build the HTML Wireframe
Step 1. Build a wireframe to make the hierarchical order more solid
The HTML wireframe is the basic structure of the site that uses only the labels and building blocks to represent the content. This structure answers the question "What appears on the screen and where?". Site formatting and styling are not considered in this design phase.
- The wireframe allows you to see the structure of the content and the flow of concepts before dedicating yourself to the stylistic choices.
- The HTML wireframe is a static structure like a PDF document or image and allows you to quickly move blocks of content to create a new structure.
- A wireframe is an interactive structure, which is good for both the developer and the client. Since the wireframe is written in HTML language, you have the possibility to browse it to get an idea of how to move between the various pages of the site. This would be impossible using the PDF format.
Step 2. Try using the "Gray Box" method
Make a draft of the page content using the gray boxes, placing the core content elements at the top. The content blocks are organized into single columns, with the most important piece of content at the top. For example, if it is the page that provides information about a company, the most important details will be placed at the top, followed by a list of staff members, then their contact information, and so on.
This does not include the header and footer. Gray boxes are a simple visual representation of the page content
Step 3. Try using a wireframing program
There are many programs that can help you through the wireframing design process. The level of code knowledge varies from program to program. Popular ones include:
- Pattern Lab. This site specializes in "atomic design", where each piece of content is considered as a "molecule" that is part of a larger structure, the page.
- Jumpcharts. This site offers a wireframe design and implementation service. This service is paid, but allows you to quickly create a wireframe without having to worry too much about the code.
- Wirefy. Wirefy is another "atomic design" system. The site tools are freely available to developers.
Step 4. Use simple HTML markup
A good wireframe can easily be converted into a website. You don't have to worry about the stylistic aspect during the wireframe making process. Instead, use easy-to-understand and easily interchangeable markup.
As for the wireframe, much more is done with essentiality. The goal is to simply build the basic structure. The visual part will be adjusted later with CSS and advanced templates
Step 5. Make a wireframe for each page
You may be tempted to make a single wireframe, perhaps thinking of using it for all pages. In reality, this will make the site anonymous and boring. Take the time to wireframe each page and you will soon realize that each page has its own organizational needs.
Part 3 of 4: Create the Content
Step 1. Prepare some of the content before you start building the site
It will be easier to get a general idea of the style of the site if you use the actual content instead of labels. You don't need to have a lot of content, but the template will look better if you have some images, both originals and copies.
You don't need the text of the articles, but you should at least have the titles
Step 2. Remember that good content is not limited to simple text
The Internet is more than a collection of sites containing texts. To be able to get noticed within your niche, you will need different types of elements to attract and retain users. Some types of content to consider:
- Photographic material
- Audio files
- Video files
- Stream (Twitter)
- Ability to interact with Facebook
- RSS (content aggregators)
- Content feeds
Step 3. Hire a professional photographer
If you intend to insert images, the initial impact will certainly be better if you use professional photographic material. A single high-quality photo is worth more than twenty mediocre photos.
Look for a young, freshly graduated photographer rather than a seasoned professional to save money
Step 4. Write quality articles
Textual content is the one that brings more traffic to a site. While you don't have to worry too much about creating content during this design phase, it's useful to start thinking about it, as you'll need it constantly once your site is up.
In addition to the content of the articles, there are other textual elements to be realized during the process of building the site. This includes your contact information, company name, and anything else you will need to enter in different parts of the site
Part 4 of 4: Turn the Idea into a Site
Step 1. Establish the style of the general elements
There are elements that will be displayed on every page of the site, such as the header, footer and navigation menu. Set the basic stylistic lines, so you can check the visual impact of each page. This will be very useful in anticipation of the layout setup phase.
Don't worry too much about the details, but try to get as close as possible to the final result you are looking for
Step 2. Create the basic layout
Start moving the various elements of the wireframe from the column to their position on the page. For example, you can put the navigation block on the left side of the page and the title list on the right side.
Try using different layouts on various pages before continuing. Have some people test the work to make sure the work keeps its organicity
Step 3. Create a template
Use a program like Photoshop to create a template for use on certain pages of the site. Use the layout guidelines you set up. You can work much faster by employing an image editing program to get the result you want. This will allow you to use the images as reference points when you need to encode everything.
Insert the actual content into the template to make sure the whole has a good visual impact
Step 4. Replace blocks with content
Start adding your content to the page. Don't worry about the stylistic aspect for now, but put each element in its place. This will help you determine if the cosmetic changes you have in mind can work.
Step 5. Create aesthetic guidelines
This is essential to maintain some stylistic cohesion, especially for larger sites. If the site is from a company that already has a logo or image elements, these should be incorporated into the design. Elements to be considered in the guidelines:
- Navigation
-
Titles (
,
, etc.)
- Paragraphs
- Italic characters
- Bold characters
- Links (active, inactive, pending)
- Use of images
- Icons
- Buttons
- Lists
Step 6. Apply your style
Once you have chosen the style and design for the site, you need to start making it effective. Using CSS (style sheets) is one of the simplest ways to apply a stylistic template to a page or to an entire site. Search the web for a guide dedicated to using CSS for more details.
