Image credit: KROMKRATHOG via freedigitalphotos.net
Images and videos are great additions in web design. However, there are things that need to be taken into account. Aiming to create something visually appealing is not something that should compromise other aspects of the experience in browsing a website. The following tips should help you get a grasp of what a good visually engaging web design is:
- Make sure that everything loads speedily.
There needs to be emphasis on site loading speed. Speed matters. Several studies have already revealed how site loading speed can become a major disadvantage. A slow site adversely affects customer conversion and return rates. If you plan to make use of a lot of visual elements on your web design, you need to make sure that they will not lead to a slow website. Take note of the following:
- Be mindful of the size of the images you use. Ascertain that the size of the image you are displaying is appropriate for its dimensions. For instance, if your image will only appear as a 200×200 logo on the upper right hand corner of your homepage, don’t use the full 1000×1000 image you originally used in creating or editing the logo. Resize it with your image editing software before uploading it to the server.
- The right image format also matters. Use the GIF format if your image has limited colors. For photos and other images that have complicated content and colors, go for the JPG format. The PNG format, the one with the highest file size, is mostly used when you need a transparent image with enhancements.
- If you want to put up a large image, consider slicing it. Image slicing is a commonly used technique to avoid creating the impression of a lengthy site loading time. By slicing a large image into smaller parts, the smaller parts can be loaded separately so your site’s visitor will be seeing visuals appearing on the browser in a shorter span of time instead of waiting for large image to load one line at a time. Photoshop has an image slicer tool but you may also choose other options such as “Image Splitter.”
- Also consider optimizing the images you use. An image with the right format and dimensions can still be made smaller (in file size) through optimization tools. Many web designers say that a 60% optimization or lower can reduce file size without compromising image quality.
- There is no ideal image size for websites but it’s always better if the images are only around 10k each. In terms of total page size (sum of all the sizes of the page elements), it is recommended to keep it at around 200k, preferably lower. There are various online tools that can help you determine the total size of your pages and pinpoint which elements need optimizations.
It’s a given that you have to look for a topnotch host for your blog or site to ensure ideal loading times. However, even if you choose one that consistently tops webhosting reviews, if your page size is too big, don’t expect the loading time to be quick and tolerable for your visitors.
- Use thumbnails
- Understand the proper handling of colors, fonts, layout, and overall usability.
A visually appealing design should have harmony in colors. Get insights on color psychology and consult color scheme guides or tools as you decide on the right color combination to use. Also, be mindful of your fonts. Choose the right size and font type that suits your site’s overall theme. Strike a balance between legibility and aesthetics. Avoid using multiple colors for your fonts. Also, don’t be too adventurous in using new and distinctive fonts as some browsers may not be able to properly render them.
The layout of the site should also make it easy to see the important items and navigate around the site. Opt for minimalism as much as possible and just highlight the important parts to be accessible through links or buttons. Most site visitors nowadays prefer sites that look simple and intuitive, especially if they are accessing the sites through their mobile devices.
- Avoid animations, automatically playing videos, audio, and other media as much as possible.
Animations and videos are great at attracting attention but they are heavy elements. They require time to load. Many of them may have file sizes bigger than the total size of all of the images of a page combined. Try to avoid using them unless they are really essential in your design concept. If you really need to make use of animations, limit the number of times they play. Don’t let them do an endless looping.
- Avoid having too many ads.
A no-brainer, it’s always important to be mindful of the amount of ads you put on your website. Having too many of them does not only increase the page loading time but also cheapens the appearance of your site.
- Make use of height and width attributes.
Whenever you use images, add the height and width attributes. These will help browsers in rendering the correct layout so that texts load first while the correct page layout is being shown. This creates the impression that the site loads faster. Without these attributes, a browser will usually download the image first before showing the final correct layout of the page. This causes a long page in particular to keep adjusting as the different images are still being loaded.
- Use responsive design.
It is advisable to use responsive web design, a design approach that ensures optimal viewing and interaction regardless of the device used to view a page. Responsive web design eliminates the need to create mobile versions of your sites or blogs so you can have more time working on your content instead of having to maintain two sites that basically have the same content. Most Internet users are also used to responsive web design by now so it shouldn’t hurt riding on the trend and taking advantage of its familiarity.
A visually engaging website should not compromise speed and usability. That’s why you have to optimize everything and adopt best web design practices. What’s the use of all the eye candies if your site has loading time and interactivity issues? Do you agree with the pointers mentioned above? If you have more to share, don’t hesitate to drop a comment below.