How to Design a Website

Опубликовал Admin
3-07-2021, 14:30
372
0
This wikiHow teaches you how to design a website which appears professional and performs well. While the bulk of your website's design is ultimately up to you, there are some critical things to do—and avoid—when creating a website.

How to Design Your Website

  1. Determine whether you want to use a website creator. Websites created from scratch require a fairly detailed understanding of HTML coding, but you can easily create a website by using a free hosting service like Weebly, Wix, WordPress, or Google Sites. Website creators tend to be much easier for first-time designers to use than HTML.
    • If you do decide to code your own website, you'll need to learn both HTML and CSS coding.
    • If investing the time and energy to create your website doesn't sound appealing, you can also hire a website designer to create your site for you. Freelance designers can cost anywhere between $30 an hour and well over $100 per hour.
  2. Map out your site. Before you even open a website creator, you should know approximately how many pages you want your website to have, what the content on each of those pages should be, and the general layout of important pages such as the home page and the "About" page.
    • Your website's pages may be easier to visualize if you draw rough pictures of each of them rather than just determining what content should appear.
  3. Use intuitive design. While there's something to be said for fresh ideas, your website's basic design should follow established guidelines such as the following:
    • Navigation options (e.g., tabs for different pages) should go at the top of the page.
    • If you use a menu icon (☰), it should be in the top-left corner of the page.
    • If you use a search bar, it should be near the upper-right side of the page.
    • Helpful links (e.g., links to the "About" page or the "Contact Us" page) should go at the very bottom of each page.
  4. Be consistent. Whatever text font, color palette, image theme, and design options you choose, make sure that you use the same decision throughout your website. It can be incredibly jarring to see one font or color scheme used for the "About" page when a completely different one was used for the home page.
    • For example, if you exclusively use cool-tone colors for your site's home page, don't implement bright, loud colors on the next page.
    • Keep in mind that using loud or clashing colors, especially when the colors display in a dynamic (e.g., moving) fashion, can evoke epilepsy in a small number of web users. If you decide to use such colors on your site, make sure you add an epilepsy warning before any relevant pages.
  5. Add navigation options. Placing direct links to important pages on your website at the top of the home page will help direct first-time visitors to the content that matters. Most site creators add these links by default.
    • It's important to make sure that every page on your website is accessible by clicking through options on your website rather than only being accessible via the page's address.
  6. Use colors which complement each other. Like any other kind of design, website design relies on visually pleasing combinations of color; because of this, picking theme colors which go together is crucial.
    • Black, white, and grey is a good combination if you don't know where to start.
  7. Consider using a minimalist design. Minimalism encourages cool-tone colors, simple graphics, black-on-white text pages, and as little embellishment as possible. Because minimalism requires little in the way of fancy elements, it's an easy way to make your website look professional and attractive without requiring much work.
    • Many website creators will have a "minimalist" theme you can select when setting up your website.
    • An alternative to minimalism is "brutalism", which uses harsher lines, bright colors, bold text, and minimal imagery. Brutalism has less of a following than does minimalism, but depending on your website's content, it may better suit your design needs.
  8. Make unique choices. Straight lines and grid-locked web elements are safe bets, but making a few unique stylistic decisions will both lend personality to your site and help your site stand out.
    • Don't be afraid to buck trends by placing website elements asymmetrically or using overlapping elements to create a layered appearance.
    • While elegant, sharp corners and squared-off elements (also known as a "card-based" presentation) are less favorable than are rounded, soft elements.

How to Maximize Website Performance

  1. Take advantage of mobile optimization options. Mobile browsers account for more web traffic than do desktop browsers, meaning that the amount of attention you pay to your website's mobile version should at least equal your desktop website's development. Most website creator services automatically create a mobile version of your site, but you'll want to keep the following information in mind for your mobile site:
    • Ensure that buttons (e.g., site links) are large and easy to tap.
    • Avoid implementing features which can't be viewed on mobile (e.g., Flash, Java, etc.).
    • Consider having a mobile app made for your website.
  2. Avoid using too many photos per page. Both desktop and mobile browsers can struggle to load pages which display a large number of photos or videos. While images are important in web design, using more than a few per page can cause unnecessarily long load times, which will prevent people from visiting the page(s) in question.
    • Generally speaking, you want your website's pages to load in under four seconds.
  3. Add a "Contact" page. You'll notice that virtually all established websites have a "Contact Us" page which has contact information (e.g., a phone number and an email address); some sites even have a built-in question form on this page. Adding a "Contact' page will give website viewers a direct line of communication to you, thus adding a solution to potential frustrations.
  4. Create a custom 404 page. When someone visits a specific page on your website which either hasn't been set up or doesn't exist, a "404 Error" web page will display. Most browsers have a default 404 page, but you may be able to customize yours from within your website creator's settings; if so, make sure that you include the following details:
    • A light-hearted error message (e.g., "Congratulations - you've found our error page!")
    • A link back to the site's home page
    • A list of commonly viewed links
    • An image or logo for your website
  5. Use a search bar if possible. If your website creation method supports adding a search bar to your website, it's strongly recommended that you do so. This will ensure that users can quickly navigate to a specific page or item without having to click through your navigation options.
    • Search bars are also useful when your audience wants to search for a general term without using trial-and-error.
  6. Invest the most amount of time in your home page. When someone arrives on your website's home page, they should get the gist of your website's theme immediately; in addition to this, all elements of the home page should load quickly, including navigation options and any images. Your home page should have the following aspects:
    • A call to action (e.g., a button to click or a form to fill out)
    • A navigation toolbar or menu
    • An inviting graphic (e.g., one solid photo, a video, or a small group of photos with accompanying text)
    • Keywords pertaining to your website's service, topic, or focus
  7. Test your website in multiple browsers on multiple platforms. This is incredibly important, as different browsers may handle aspects of your website differently. Before you begin promoting your website, try visiting and using your website 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 built-in browser on several different Android phones (e.g., Samsung Galaxy, Google Nexus, etc.)
  8. Continue updating your website as it ages. Design trends, links, photos, concepts, and keywords all change as time goes by, so you'll have to continue making changes to your website in order to stay up to date. This will require you to check your website's performance alongside other similar websites at least once every three months (preferably more often).

Basic HTML Help

Tips

  • Website accessibility is another important aspect of website development. This includes things like captions for hearing-impaired audiences, audio descriptions for blind visitors, and photosensitivity warnings if your website uses potentially seizure-inducing effects.
  • Most website creators have a set of templates which you can use to cement your site's layout and design before adding your preferred elements.

Warnings

  • Most site creators are free; however, if you want to use your own domain (e.g., "www.yourname.com" instead of "www.yourname.wordpress.com"), you'll have to pay a monthly or an annual fee.
  • Avoid plagiarism and observe all copyright laws: don’t add random images from the web, or even structural elements, without permission.
Теги:
Information
Users of Guests are not allowed to comment this publication.