This wikiHow teaches you how to design a smooth, professional-looking website. While you are free to decide on the design of your site, there are some important things to do and avoid when creating a website.
Step
Part 1 of 2: Creating a Site Design
Step 1. Decide if you want to use a website creator
Building a website from scratch requires a detailed understanding of HTML code, but you can create a site using a free hosting service like Weebly, Wix, WordPress, or Google Sites. Website creators tend to be much easier for novice designers than HTML.
- If you decide to code yourself, you should learn HTML and CSS coding.
- If you are reluctant to devote the time and energy to creating your own website, you can hire a website designer. Freelance designer services vary widely, some charge per hour and some per project, with a total range from millions to tens of millions of rupiah.
Step 2. Create a sitemap
Before opening the website creator, you should have determined how many pages are on the site, what content is on each of them, and the general layout of important pages such as "Home" and "About".
It will be easier for you to visualize the pages of your site by creating rough images, not just shadows
Step 3. Use an intuitive design
While new ideas are usually interesting, basic designs should follow these general guidelines:
- Navigation options (for example, multiple tabs for different pages) should be placed at the top of the page.
- If you're using the menu icon (☰), it should be in the upper-left corner of the page.
- If you're using the search bar, place it near the top right side of the page.
- Helpful links (for example, links to "About" or "Contact Us" pages) should be at the bottom of the page.
Step 4. Be consistent
No matter what text, color palette, image theme, and design you choose, make sure you apply the same decisions throughout your site. Users will be surprised to see that the font and color scheme on the "About" page is very different from that used for the home page.
- For example, if you use a soft color for your home page, don't use a bright color on the next page.
- Note that the use of bright or colliding colors, especially dynamically displayed (or moving) colors, can trigger seizures or epileptic seizures in a minority of users. If you decide to use such a color, make sure you include a "risk of seizure" warning before the page in question.
Step 5. Add navigation options
Placing direct links to important pages above the home page will help new visitors to the content that matters to them. Most of the website creators add this link as default.
It is important to ensure that all pages of the site can be accessed by clicking on an option within the site rather than only being accessed via the page address
Step 6. Use matching colors
Like all types of design, website design depends on pleasing color combinations. Therefore, choosing a matching theme color is very important.
If you're confused, start with black, white, and gray
Step 7. Consider a minimalist design
The minimalist concept encourages the use of cool tones, simple graphics, black text pages on a white background, and as little embellishment as possible. Since a minimalist design requires very few elements, it's an easy option to make your site look professional and attractive without too much effort.
- Most website creators provide a "minimalist" theme that you can choose from when creating a website.
- The minimalist alternative is "brutalism", which uses harsher words, bright colors, bold text, and minimal graphics. There are far fewer users of brutalist designs than minimalists, but if the content is appropriate, this design can be a good choice.
Step 8. Apply unique options
Grid and straight-line elements are safe choices, but some unique styles will add a personal touch and set your site apart from the rest.
- Don't be afraid to buck the trend by placing asymmetrical site elements or using stacked elements to create a layered look.
- Although elegant, sharp-edged square elements (known as card-based presentations) are less desirable than soft, rounded elements.
Part 2 of 2: Maximizing Site Performance
Step 1. Take advantage of car optimization options
Mobile browsers bring in more traffic than desktop browsers. This means that the attention you pay to the mobile version should be at least the same as the desktop site development. Most auto-creator websites have already made a car version, but keep the following information in mind for mobile sites:
- Make sure the buttons (for example, sitelinks) are large and easy to tap.
- Avoid features that cannot be seen on mobile devices (eg Flash, Java, etc.).
- Consider building a car app for your site.
Step 2. Don't include too many photos per page
Desktop and mobile browsers sometimes have a hard time loading pages with lots of photos or videos. While images are very important in web design, excessive amounts of media per page can prolong loading times, and that discourages users from visiting those pages.
In general, a page load should take less than four seconds
Step 3. Add a "Contact" page
You may notice that most sites provide a "Contact Us" page that contains contact information (such as phone number and email address). In fact, some sites provide automated inquiry forms on this page. The "Contact" page is a direct line of communication between site visitors and you, which means it is also a solution to a visitor's question or frustration.
Step 4. Create a custom 404 page
When a visitor arrives at a specific page that hasn't been created or doesn't exist, a "404 Error" page will appear. Most browsers provide a built-in 404 page, but you can customize how it looks from the website creator settings. If you want to create a custom 404 page, enter the following details:
- Funny and fun error messages (e.g., "Congratulations, you landed on an error page!")
- Link back to home page
- List of links that visitors usually see
- Your site's image or logo
Step 5. Enter the search bar if possible
If the website creator method you are using supports adding a search bar, we recommend adding it. This ensures users can find the specific page or content they are looking for without having to click through all the navigation options.
The search bar is also very useful when visitors want to search for common terms without dabbling in random pages
Step 6. Pay more attention to the home page
When visitors go to the home page, they should have got the gist of your site's theme. In addition, all elements of the home page should load quickly, including navigation options and images. The home page should also provide the following aspects:
- Call to action (for example, a button to click or a form to fill out)
- Toolbar or navigation menu
- Inviting graphics (such as a solid photo, video, or multiple photos with complementary text)
- Keywords related to the service, topic or focus of your site
Step 7. Test your site on different browsers and platforms
This is very important because browsers process aspects of a website in different ways. Before promoting your site, try opening and using your site in the following browsers on Windows, Mac, iPhone and Android platforms:
- Google Chrome
- Firefox
- Safari (iPhone and Mac only)
- Microsoft Edge and Internet Explorer (Windows only)
- The default browser of some Android phones (Samsung Galaxy, Google Nexus, etc.)
Step 8. Keep the site updated
Design trends, links, photos, concepts and keywords are always changing. So, you too must always make changes to keep up with the times. You should check your site's performance and compare it to similar sites at least once every three months (preferably more often).
Tips
- Accessibility is also an equally important aspect in website development. Accessibility includes descriptions for hearing-impaired visitors, audio descriptions for visually impaired visitors, and photosensitivity alerts if your site uses potentially seizure-inducing effects.
- Most website creators provide templates that you can use to determine the layout and design before adding the desired elements.
Warning
- Most creator sites are free, but if you want to use your own domain (such as "www.yourname.com" instead of "www.yourname.wordpress.com"), you'll need to pay a monthly or yearly fee.
- Avoid plagiarism and learn all copyright laws. Do not include random images from the internet or structural elements without permission.
