Web design can be a challenge, and many people would say that it is far from easy. However, there are a number of tricks that you can use to make your life easier as a web designer. Even the best web designers in the world have a secret or two that they use, from hidden hacks to specific workflows that they have found works for them. The list below is compiled from web design tips and tricks received from some of the world’s best developers and designers, and should help take some of the complication out of web design.
1. Make Global Changes
The early stages of web design can be time consuming, especially if you have to keep making changes to everything on the page. However, when there are pages that require you to use the same format throughout, why not apply global changes. For instance, if you are programming using CSS, and you would like all the font on one page to remain the same, use an asterisk as the selector to ensure that your changes are applied globally. However, this may not be a good idea to implement in your live code, so you need to choose when to use this strategy.
2. Count Your Characters
To ensure that the people who visit your webpage have the best browsing experience, you should ensure that each line in your design contains between 45 and 75 characters. This will ensure that your users have a relaxing read, while absorbing as much information as possible. The easiest way to ensure that your website conforms to this rule is to place dummy text on the website, with an asterisk between characters 45 and 75. When you test the site, ensure that all the text resizes itself to fit within these parameters.
3. Use Bright Colors as Outlines
Using a bright color like red, yellow or blue to highlight the outline of what you are designing can be a great trick, especially when you are working with media queries. The bright colors will not only make it easier to see what you are working on, it will also make it easier for you to see the rules that are being applied to the information you are working on. This makes it much easier to design webpages, especially for cross-platform design.
4. Ensure Images are in 8bit PNG Format
This may seem like a rather unimaginative, outdated piece of advice, but it is one that could help you design pages and apps faster and with less stress. If you find yourself exporting a picture from Photoshop and it does not have to be transparent, you should export it as an 8bit PNG file. This will help reduce file size while maintaining image quality. If you would like to maintain a picture’s transparency, but reduce the size of the file, you could use a program like PNGQuant, which can convert 32/24bit PNGs to 8bit without compromising the transparency.
5. Get Your Clients Involved
There are many designers who would rather work by themselves during the design process, then finally involve the client once they are done with most of the work. However, involving your clients from the beginning of the design process means that you will get the best advice on how to improve your design from the onset, as they are the ones who know their business best. Creating the best webpage or application for your client is usually as easy as combining your skills with their experience in their chosen field.
6. Make use of Prototyping Tools
Prototyping tools are very important, especially when you need to show your clients early versions of your designs quickly. Tools such as Fireworks and Balsamiq are perfect for prototyping, and will make it so much easier to know that you are on the right track before you start doing the major work on Photoshop.
7. Use A Grid
It has been said that the best websites are designed to a grid, and for the most part this is very true. Using a grid will ensure that all the page elements that you would like to display are aligned neatly, and in the right place regardless of the page that they may end up on. When creating your grid, remember that it is much easier to use grid columns that are easily divisible by 2, 3 and 4. One of the best and most versatile grids to use is a 12 column grid.
8. Create the Right Color Scheme
Creating the right color scheme may seem easy to most people, but there are many people who simply cannot select an attractive color scheme for what they are trying to create, either because they are colorblind or because they just do not have a sense for colors. If you are one of those people, you could use tools such as Adobe Color and Colour Lovers to give you the inspiration to create a new color scheme or design for your application or website.
9. Make Use of Tools Like Google Fonts
If you are trying to come up with or design the best fonts for your website, perhaps you should try making use of online tools like Google Fonts. Apps like these allow you to build and compare different typographic palettes, making it easier for you to select the best one. If you are looking for free fonts, Google Fonts is a good place to start.
10. Calm Down
This may seem like a dumb point to make but it is perhaps one of the most important points on this whole list. There are many designers, especially those who are visually creative, who love to pull out their sketchbooks before they even know what their goal is.
However, it is easier to begin designing your website or app if you already have an idea what your user’s goals are, and how they are going to reach them. If you base your design around these scenarios, rather than making the scenarios fit into your designs, then you will find it much easier to design your digital solutions. Keep Calm and Start your design process