Monthly Archives: February 2016

Web Design Tips and Tutorials

Internet is filled with millions of different websites all sporting unique designs that either look really attractive or look real messy on the viewer’s perspective. If you ever plan on diving into the web and getting your site published, you should know these basic web design tips tutorials that will greatly help you when designing a website from scratch.

Web Design Tips

Create a Mockup Design First

When designing a website, there are two major phases where the first is the designing and the second is the coding. You can actually start with the coding phase if you think you are skilled, but the problem is that coding takes time depending on your skill and if ever corrections to the design need to be made, recoding is necessary. But if you spend all the time you have perfecting your design, you can proceed to coding smoothly without any rollbacks.

Ensure your Content Remains Easy to Read

After your mockup design is finished, check the design before putting it as HTML. Remember, you should make sure your design is final to make your coding as easy as possible. The images (if any) should be appropriately sized and positioned depending on how much attention you want to give your audience and the text should be large enough to be readable while putting emphasis on other elements if needed.

Apply as much CSS as Possible

Now that you are all set with your final mockup, you can start using that as a reference in coding your new website using HTML. However HTML shouldn’t be the only thing that should be used in making a website because full HTML sites take longer to load. This program can be solved by practicing CSS techniques to trim down the filesize of the web pages and increase compatibility amongst the top Internet browsers. You can find plenty of web design tips tutorials on CSS just by searching online.

Use the Right Formats for Images

As you start to construct your website, you will find yourself exporting graphics from your favorite graphics design tools and importing them to your website editor. But before you start to rush yourself on these easy procedures, try to take a better look at your graphics and see if they are using the right format. Remember, use JPEG file formats for photographs and PNG formats for logos, screenshots, and other graphical elements. You can also use GIF as a replacement for PNG as long as little or no image quality is lost.

Whenever a web designer gets a web design project, he or she will require to take a step back and go through the research process in order to complete the job. The research process is a tedious process, it determines how well, and successful will the result of your web design. Ideas for web design will share with you how to go through that research process smoothly and obtain results.

One fine day, you received a call from some client and he requests you to design a website for his company. Over the phone, he briefly tells you what his company is about and asks about the prices, you then fixed an appointment with him for discussion. You will probably get excited about it and starts to get more details of the company by checking them on Google, and thinks about some prelim ideas for the website. At this stage, your research process has already started.

RETREIVING THE DETAILS:

After meeting up with the client, you get a lot of details that will assist you in your design process.
This details applies even when you are designing a personal website.

1. Nature of the Company

2. Client Preferences (Example websites?)

3. Target Audiences (kids? Young adults? Everyone in the world?)

4. Platform (Flash? Html? Php? Asp? )

By organizing these details, you get a bigger picture of:

1. What are you going to design?

2. What style of design are you approaching?

3. Whom you should design for?

4. How will your design work?

5. How will your design please both the audiences and the client in order to be successful?

DETERMINING THE STYLE:

With the information you have on hand, its time to determine the style. For a start, you should base on the client’s description of his company, his nature of the company to give a rough gauge on the design style. Examples below:

Example 1:

Web Hosting business >> High tech web design, sleek and professional design

Example 2:

Dolls and Toys business >> Kiddy, Girly, Colorful, Fun design

COLOR THEMES:

Having a good and suitable color theme on your web design will give users a pleasing experience while surfing through the web site you designed. One of the important techniques is to get a color chart from your local art store or use some color chooser tools to aid in your color selection. Your color theme will affect the mood and feel you want to create.
Colors also have their own meanings. For example, white is clean, blue is cool and corporate, having a white and blue color theme gives you a clean and corporate web design. Orange and yellow are warm and friendly colors, Grey is cool, combining a Orange-Grey theme will give you a friendly and fun mood. Dark colors are also popular among many, because they easily matched other bright colors. A common match is using a black background and light colored text as a combination.

There are thousands and one meaning to choose your color theme. Whether your color theme turns out successful depends heavily on the first step “Determining the style” of your website.

PHOTOS & GRAPHICS:

After getting the colors done, its time to think about the graphics and images. As a graphic says a thousand words, it is good to think about how you want to approach this portion. Here are some recommendations you can try:

1. Stock photos – Some are free, some requires you to pay a certain amount before providing you with high resolutions image. If your client has the money and there are suitable photos he would like to use, this is the way to go. Searching in Google for “stock photos” will give you plenty of results on this.

2. Take your own photos – When budget is involve, usually the project will require you to take a relevant photos and use them as supporting images on the website. Having a mid-range camera should do the trick as images for website are all on low resolution. Seldom there is a chance for you to use an image more than 640 x 480 pixels.

3. Creating Graphics Images – A web design will always need custom-made graphics images. For example, icons for a Shoe section, button for submitting information. You will need some skills in creating the graphics of your needs, or you will feel stuck while designing. Consider looking for tutorials on creating certain effects, like rounded corners, Mac alike buttons, pattern backgrounds and more. Learn about vector graphics tool like Adobe Illustrator and Macromedia Fireworks. They can help you to create graphics, mockups and layout fast and efficiently. This will greatly aid in your next web design project.

INSPIRATION AND REFERENCES:

If you already have some inspiration on how to design the layout, great, but if you do not, consider looking at related websites for some references on how they are being done. A search in Google also reveals some websites of the same genre. You can also check out ready-made templatesas well. I am not teaching you to copy exactly, but as a new learner, you should take reference and see how they are being designed.

Why bother looking at them?

Reference sites will give you ideas on usability, color theme, ideas on relevant images, navigation, features and many more guides to work on your web design project. Always consider them as useful references to help you whenever you need inspiration and ideas for your web design. It is all about looking more, reading more and getting your eyes and brain more exposed to the web design styles.

Final Say

I hope this article has been helpful to give you some ideas for your next web design project. In this web design industry, it is a never ending journey of learning. By reading more and seeing how others create, you will be more aware the next time you design your client’s or your own web site.

There are so many more web design tips tutorials made by countless web design professionals that you can rely on. Always search around the net for the latest trends so you can avoid mistakes that other designers make as they try to perfect their websites. These four web design tips tutorials alone should save you plenty of frustrations as you go through the process of making a nice website for yourself. For best results, use web designing software along with a nice graphics design tool and you should be fine.