web design for beginners

Define your audience and their needs

Defining the purpose and goals of your website should be your first step. Focus on what you want your website to achieve. Create a profile of your target audience and try to understand their needs and likes, and design the site with them in mind at all times. Take a look at competitor websites to get an idea of ​​what works and what doesn’t.

easy navigation

To make your content easy for your target audience to navigate, make sure links to the main sections of your website are easily visible from every web page. You want to invite people to view as many pages of your site as possible, so make it easy for them to find each page.

A good way to help you visualize the structure of the site is to create a flowchart of the entire website on paper. Think about how your users can structure the information within the site to help them find the information they need easily.

Try to keep the information on your first page as an overview so you don’t bog people down with too much information. They can then click on the links (clear and easy to use) to see more information on the topics that interest them.

Design

Most web pages have a common structure consisting of a header and footer, a horizontal navigation bar at the top and/or a vertical navigation bar on the left side of the page, and a central section for the page. main content.

This structure is based on simple and easy to understand design principles. If there’s a lot of content, break it up into several different pages so your viewer doesn’t have to digest too much information on one page.

Keep the text simple and to the point, and make sure the grammar is correct; check and double check to avoid looking unprofessional. Text is harder to read on screen than in print, so it’s crucial to get your message across in a succinct, easy-to-understand way.

You should always keep your text blocks relatively small. Large paragraphs are harder to read and can cause your audience to lose interest quickly.

Stick to 2-3 different fonts max, and make sure they’re the ones usually found on most computers. San serifs are easier to read on computer monitors, so stick to them for the main text, and make sure your text is large enough for everyone to read. Bullet points, lists, and relevant photos can help break up the text.

Learn the basics of html

Learning the basics of html, even if you’re using the WYSIWYG Front Page or Dreamweaver software, will help you understand how a web page is created and solve problems you encounter while using the software. Try to stay away from tables and build your pages using layers (divs) and cascading style sheets (CSS).

Tables mix “presentational” data with their content, making the file size of your pages unnecessarily large, since users must download this presentational data for every page they visit. But by using structural markup to build web pages, you can keep the actual content of your page separate from the way it’s presented.

Table-based pages are also much less accessible to users with disabilities and viewers who use mobile phones and PDAs to access the Web. And to change the design of the site, all you need to do is change the style sheets; you do not need to edit the pages themselves.

using color

Creating a balanced color palette to choose your website color scheme will help you create a professional looking website. Bright colliding colors scream amateur.

If you’re building a website for a company with a logo, start here. Upload the logo to your host server and go to a color palette website like http://www.colorhunter.com to create a palette, from which you can choose colors for the main banner, buttons and text rollovers etc. . And keep things simple and uncluttered—empty space makes colors pop and text easier to read.

Optimization photos and images

Don’t use a chart just for the sake of it; make sure there is a reason for its presence, i.e. it improves user understanding and experience. A site full of unnecessary graphics looks amateurish and can get in the way of accessibility tools like screen readers.

Make sure the photos and images you use are clear and well-optimized to reduce file size and increase page load times. A sure sign of an amateur website is a page with a huge image that takes forever to load. And your viewer will probably click away from the site before they have a chance to view it.

Creating Clear, Professional-Looking Graphics GIFs are actually grids made of small square pixels. Data about each pixel is saved (so it is not lost) and you can save up to 256 colors. Pixels can also be transparent.

A GIF can contain more than one frame, so it can be animated. It is a good format for saving images with fewer colors, such as small tables and graphs, images containing text, and drawings.

JPEG files are a good file format for images with millions of colors, such as photographs, drawings with many tones, images that contain gradients, etc.

Design tips:

a.) Use layout to highlight functionality. For example; the use of gradients on the buttons also helps make them look more ‘buttony’; the mouse of different colors over the text draws attention to the links.

b.) Be careful with animation and sounds unless they serve a specific function. It’s hard to focus on reading what’s on your site when things are flashing on and off and flying around the page. And visitors with slow connections may resent that you wasted their time by forcing them to load animations and sound files against their will. Some recent research indicates that visitors targeted by blinking ads are more likely to leave the site immediately, and are much less likely to bookmark, return to, link to, and recommend the site.

c.) Do not use images as a web page background. Image backgrounds scream ‘amateur’ because they are mostly used by amateur sites. They take longer to load and the text over the background image is often hard to read.

e.) Design the web page including all the elements within it for your audience. For example, create a relaxing atmosphere for a massage or therapy website using colors like lavender and blue. Use darker, more restrained and strong colors for a more traditional finance website.

d.) If your business doesn’t already have one, create a logo for your site, display it at the top of every page, and link from it to your home page. It will make your site look more professional and build a sense of brand to help people remember your site and recognize it as theirs.

It goes live’

Accommodation

When it comes to accommodation, the cheapest is not always the best. For a little ‘beginner’; website, you shouldn’t need a lot of bandwidth (unless you haven’t followed the ‘image optimization’ guidelines!) but I wouldn’t recommend hosting your website with the cheapest offer available until you’ve verified that they can give you all the support for. you may need as a newbie.

I would always recommend looking up a local contact phone number on the website of the hosting company you are considering using and calling to make sure there is a real person at the end of it.

Ask if you can get technical help from this number; they can only communicate via email for technical support. If they give you another number, ask how much it costs per minute, and give them a call to make sure there is someone at the end willing to help you as a beginner in case you have any problems connecting to their server, uploading your files, or ordering. your email accounts.

You should also make sure that email accounts are included in the cost and if you have dynamic elements such as a search function or website inquiry form, check that the server supports PHP or ASP etc. , required to allow this feature to work. work, and whether that is included in the quoted accommodation price.

FTP

You can download free ftp software to upload your new website to your new hosting space from a variety of sources, including Filezilla or Smart ftp, or you can try a free trial with Cute ftp.

search engine optimization

Although professional web designers have website optimization in mind from the beginning of design and development, as a newbie, you have to go step by step! So now that you’ve designed, built, and uploaded your website, take a look at some of the ways you can now start optimizing it for search engine ranking:

Leave a Reply

Your email address will not be published. Required fields are marked *