web design tips and tricks
Web Design

Tips To Build a Killer Website

Being a good web designer is knowing the easy way around to do difficult things. Web designers should know how to create their own ways to build a killer website. It is important that they have some website design tips and tricks up their sleeve to make their jobs easy. It is also their responsibility to ensure that the website is cool enough to attract visitors. Here are some of them listed below for you that could help you change the way you work.

Check the Character Count

web design tips and tricks

A line is readable and safe when it has about 45-75 characters. An easy way to make sure that your responsive design is in line with this and supports it. Use a dummy text on the page along with an asterisk at character 45 and one at character 75. Test the site to ensure it resizes within these limits.

PNGQuant for Image Conversion

Another easy in the list of website design tips and tricks is to reduce the size of your image and still maintain its transparency. An easy way to do it is through PNGQuant. With this, the 24/32bit PNGs can be converted to 8bit PNGS and the transparency will still be there.

Typecast Along With Google Fonts

Google recently released a free public version of Typecast. This was done after it teamed up with Monotype. Typecast is easily accessible through Google Fonts. It lets you pick any font enlisted in the Google Fonts website which can then be followed to the Typecast app. You can now work with the font on the desired text along with different controls using which readable and clear type systems are written. The work can easily be exported as production ready CSS and HTML or PNG files which can be merged or shared with other computers.

Use a 12 Column Grid

It is a nice idea if the website designers used a grid that is divisible by 2, 3 and 4. Thus, a 12 column grid happens to be the best option here.

Export Images as 8bit PNG

web design tips and tricks

This is yet another easy website design tips and tricks for the website designers. Exporting an image to PNG from Photoshop doesn’t have to be transparent. It should be exported as 8bit PNG. The file size is size is reduced tremendously while in most cases the quality is maintained as well.

Readable Font Sizes

Typography is one of the most important things on a website. People will be reading the content for which you should ensure that the font of the text is big enough for all eyes. Tiny fonts are no good they strain the eyes and people may not be interested in going through what you have written.

FitVids to Embed Videos

Resizing a video to be responsive while also ensuring the resizing vitiates charitably for Flash if HTML5 embedding is not supported is quite difficult for the web designers even after HTML has made video embedding simple. FitVids is a jQuery plugin that will help you in resizing your videos.

Name the Layers Wisely

Make sure that you name the Photoshop layers in a descriptive way. Just as easy it is to create a new layer, it would be much easy for you and the others to recognize the layers if you give it an easy and understandable name. You wouldn’t have to dive into every layer to find what you are looking for later on.

Label all the Folders

web design tips and tricks

An ‘ASSETS’ folder should be created which would comprise of all the images, fonts or logos which have been used in your website designing project. The individual folders should also be labelled as required.

Save Everything to the Server

All the work that you do should be saved in the server at the end of the day. Your work should be available even when you are not around so in case someone needs to have a look at something you wouldn’t have to be called up and disturbed on a holiday.

Use Squint Test

Lean away from the screen and squint – things will get blurred and you would be able to see the prominent and colourful features. This technique helps a designer understand what the visitor who comes in for the first time would notice what is most important.

These web design tips and tricks will help you in designing a smart and attractive website in no time.

Always Keep Your Clients Involved With the Work

The clients know what their website is all about and what business is going to take place on it. It is best that you involved them from the beginning so you have a clear understanding on how to proceed.

Make Navigation Simple

An easy to navigate page attracts the visitors. Instead of loading the website with links to every page you could make it rather simple. Multi-tier dropdown navigations are meant for people who are skilled in using a mouse. Try to keep things simple so visitors are easily guided to the actual content you mean to show them.

Take Feedback from Dribble

Dribble is a social network where designers can share the work they are doing and then get comments and suggestions from their seniors. There could be other social websites that do something like this you can use that too. There are times that other designers will tell you if you are right or wrong. It never hurts to get suggestions from others.

web design tips and tricks

Apply Global Changes

If you wish to speed up the work of your website designing at an early stage then the wildcard CSS rule can be used. By using an asterisk as the selector you can apply changes globally in a page. For instance, to change all the fonts in a page to calibri all you need to do is: *{font-family:Arial, Helvetica, Calibri;}. This is a wonderful trick that you can use when you are designing a website. Make sure you don’t leave it in your live code, use it carefully.

Leave a Reply

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