If you want to design and create web pages, this process will be much easier if you plan ahead. In the planning phase, the designer and client can work together to find a format and layout that suits their needs. The planning process affects the style or style of the site, you could say this is the most important aspect in web design, especially if it is for business purposes.
Step
Part 1 of 4: Creating the Basic Structure
Step 1. Determine the function of the website
If you're creating a personal site, you probably already know the answer. However, if you are creating a site for another organization, company, or person, you need to find out what they want and the functionality of the site. Everything you specify here will take effect when the web page is finished.
- Does the website require Storefront? Should user comments be made? Will the user need to create an account later? Is the website article oriented? Or image oriented? All these and other questions will help you in designing and designing the site.
- This planning process can be drawn into a drawing, especially if it is for a large company and many people are involved in creating this project.
Step 2. Create a site map diagram (site map)
A sitemap diagram is similar to a flow chart, showing how users move from one page to the next. You don't need a web page at this stage, just a general flow of concepts. You can use a computer program to create diagrams or sketch your own on paper. Use this diagram to demonstrate the concepts of hierarchical arrangement and web page connectivity.
Step 3. Try the card drafting method
One popular method of group web development is to use a number of cards to find out everyone's expectations. Take a number of note cards and write down the basic content of a web page on each one individually. Arrange these cards together with your team to find the best concept. This method is suitable for use when you are collaborating with others on the creation of web pages.
Step 4. Use paper and a bulletin board, or a whiteboard
This is an original planning method on a small budget, you can quickly delete or shift content and change the flow. Draw your web design on paper, then connect the papers with thread, or draw lines on the board. This method is very suitable for use in brainstorming sessions.
Step 5. Create a content inventory
In fact, it tends to be more appropriate for redesigning websites than new ones. Insert each finished piece of content or web page into a spreadsheet. Make a note of the purpose of each piece of content or page, using this list to determine what to remove and what to keep. You can simplify the structure of the web and simplify the redesign process later.
Part 2 of 4: Creating a Basic HTML Outline
Step 1. Create a wireframe to establish the web page hierarchy
The basic HTML template is the blueprint of the site you will build, using only the most basic tags and sample (blocks/templates) content. This framework answers the question, “What is visible on the web and where?” Formatting and styling is not required in the creation of this outline.
- You can see the structure and flow chart of the content with a basic outline before you choose a style setting.
- Basic HTML templates are not static like PDFs or images, you can quickly swipe through sample content to create new structures.
- The base framework is interactive which benefits both web developers and clients. Since this basic framework is written with simple HTML code, you can still navigate it and know how web page switching works. This cannot be done with PDF.
Step 2. Try the Gray Box method
Block or highlight your webpage content in Gray Box, most important content is at the top. Sort the contents in one column. For example, if the page is “About the Company” then detailed information about the company is at the top, followed by a list of staff, then contact information, etc.
This does not include headers and footers. Gray Box is a visual representation of the content that will appear on the web
Step 3. Try a basic skeleton builder program
There are various programs that you can use in the process of creating a basic web framework. The amount of web programming code (language) that you must master is different for each program. Some of the programs that are quite popular include:
- Pattern Lab. This site is dedicated to “atomic design”, each content is considered a “molecule” that composes a larger web page.
- Jumpcharts. This web page provides web-based planning and framing services. These sites are paid and require a subscription, but you can build web frameworks quickly without having to master a lot of web programming code.
- Wirefy. Wirefy is another site that offers “atomic design”. Web developers can get the tool for free.
Step 4. Use simple HTML markup
A good basic template will easily convert to the original site. Don't think too much about web styling during the process of creating this template. Use markup that can be easily understood and changed.
A simple basic framework is much better. The purpose of creating a markup is to build a structure. Visual appearance can be adjusted later with CSS and advanced markup
Step 5. Create a basic outline for each web page
You may be tempted to equate every web page with one basic outline. In fact, this will only make your site plain and boring. Create a different outline for each page, you will understand that each page needs its own design.
Part 3 of 4: Creating Content
Step 1. Prepare the content before creating a web page
You'll find it much easier to preview your webview if you already have actual content instead of using samples or placeholders. You don't need to have too much content, but your mockup will look much better if you use a copy of the original image.
You don't have to have all of the article material, but at least it should have an actual headline
Step 2. Remember that great content isn't just text
The Internet is much more complex than a simple web page of text. You need a variety of different content in order to create a great website to attract and invite visitors. For example:
- Picture.
- Voice.
- Videos.
- Web transmission or webstream (Twitter)
- Facebook Integration
- RSS
- Web feed
Step 3. Ask a professional photographer for help
If you want to include photos on your site, the first impression you will get from your website will be much better if it is filled with professional photography. One good photo is worth more than twenty low-quality photos.
Look for a fresh graduate of the art of photography as a cheaper solution than a professional photographer who has been in the business for a long time
Step 4. Write quality articles
The written content on the web page will determine the amount of your web traffic. While you don't have to worry too much about content creation in this design process, it doesn't hurt to start thinking about it because you'll also need content on a regular basis once your site is up and running.
In addition to article content, there is written material that you also need to have in the process of compiling a web page. For example contact information, company name, or anything else that will be used multiple times on the site
Part 4 of 4: Turning Concepts Into Websites
Step 1. Arrange the basic elements
This arrangement of elements applies to every page on your site, such as headers, footnotes, and navigation menus. Set it up in a very simple style so you can check how all pages look. This is especially useful as you progress into the process of creating a web layout.
Don't worry too much about details, try to preview (preview) how the header will look
Step 2. Create a simple layout
Start by shifting the clock position from the base outline column to the actual location on the page. For example, you might want to move the sample navigation menu to the left of the page and the list of headlines to the right.
Keep experimenting with web layouts for multiple pages, before you move on to the next step. Let someone else look at it to see if the layout you've created feels alive
Step 3. Create a mockup
Use a program like Photoshop to create mockups or sample pages of your website. Use the layout you have compiled as a guide. You can make mockups faster and get the results you want with an image processing program. The results of these images can later be used as a reference in the process of writing web programming code.
Put the actual content in the mockup to make it look good
Step 4. Replace the sample concept with the original content
Add content and elements to web pages. Don't sweat the web style settings for now, just stack everything to the correct location. This will help you review the web style changes you make later.
Step 5. Create a web style guide
It is very important to maintain a mix of styles, especially for large sites. If the site is intended for business purposes and already has its own brand or style, this should be integrated into the site design. Things to consider when creating a web page style guide:
- Navigation
- Head note
- Paragraph
- Italic character
- Bold character
- Links (active, inactive, hover)
- Image usage
- Icon
- Knob
- list
Step 6. Apply the web style
Once you find the right style and design, implement it. CSS is one of the easiest ways to implement styles on a web page or across the site. See the following instructions to better understand the details of using CSS.
