Table of Contents [hide]
Are you ready for another dose of web design tips to improve your website? And, not only in the terms of visuals. Performance of your website is as important to create excellent experience. What web design tips will we discuss today? We will begin with tips on choosing the right images for your website. You will also learn some tips on how to crop them. Then, we will move to assets optimization. This can help you speedup your website. There is a lot in front of us. So, let’s begin.
Tips 1–3 are in part 1.
Review your visual assets
Welcome back in the second part of web design tips! Let’s start with the second item on the list. We have to talk about all the images you have on your website. Or, the images you are planning to use. In the terms of images, I have two web design tips for you. My first tip to improve your website is about improving the quality of your images. I know. This may not be so helpful if your resources are limited. Let’s face it. You might be already doing your best.
Use proper cropping
Still, I believe that there is a way to take the images you are using to another level. First, Make sure your images are in the right shape. I mean, literally. All your images should be cropped so the right thing is in the right place. Imagine that the image is horizontally and vertically divided into thirds, 9 in total. Then, the main object of the image should be placed according to these squares. This is called rule of thirds. And, it is used by artists and photographers to create balance in the image.
Some people will tel you that the main object should be right in the center. This is not always true. The reason for using the rule of thirds is that gives you a guide for placing focal points. Use the intersections of any of the nine rectangles to create focal points. This will create interesting balance in the image. Also, it will make the composition more interesting and compelling. As a result, you can create composition that is asymmetric and more dynamic.
I should mention that rule of thirds is not the only guideline for creating composition. Another practice is using golden ratio, or Fibonacci spiral. There are many people who believe that golden ratio is the key for perfect composition and design. In web design, you can find grids and layouts based on golden ratio. Here are some examples how to use golden ration in composition.
Simple composition for design portfolio
This is all great if you are a photographer. However, this is about web design tips. What if you are a web designer and want to create a design portfolio? Then, you will not need to show multiple objects in single image. The majority of images will be much simpler. So, calculating golden ratio may not be necessary. Let’s keep things simple. I think that placing the object in the center will be enough. When you take a look at shots on Dribbble, most of them use this “composition”.
There is usually some small amount of space on the sides with the design in the center. I am currently using similar layout in my own portfolio. The only difference is that I removed the space on the bottom and let the design “disappear” below the edge of the thumbnail. Another, also very popular, approach is using mockups. Designers like to use either mockups of devices or browsers. This helps designers show how their designs look in the real world.
This is probably the main reason for using mockups. It really makes a difference. When you present your work to client, and you use mockups, it is easier for her to imagine how it would look. When you show the whole layout, it can still be too difficult to imagine how it would look on real device. Client doesn’t know when the fold is and how responsive the layout is. Mockups can help you solve this problem. Also, you can use rapid prototyping and build some MVP.
Mockups can become boring, use variety
Using mockups as definitely among my web design tips that are good for business. However, there are two potential downsides, at least. First, when you use the same mockup, your portfolio can quickly become a bit boring. This problem is also present even if you don’t use mockup. If you use the simple approach I outlined above. Using the same background color is basically the same as using the same mockup. One solution is using cycling through set of different mockups, or colors.
Mockups and variety, can help you create portfolio that is more tangible and not boring. I definitely have to implement these two web design tips as well. The second potential downside is that mockups can also cause damage to your portfolio. However, this will happen only if you use mockups that don’t meet certain standard of quality. There are two types of mockups. Those mockups that are photorealistic and those who are not, also called flat.
Mockups should follow design direction
I don’t think that one is better than other. Both, photorealistic and flat mockups, can help you improve your website. There is one thing matters, and that’s the next item on web design tips list. Mockups have to follow the design direction of your website. Meaning, if your website follows flat design, you should use flat mockups. On the other hand, if you focus more on photos and skeuomorphism, use photorealistic mockups. Otherwise, your design will be inconsistent.
And, the same is true for any other design styles. We can take minimalism as one example. Let’s say you want to create great design in minimalist style. By the way, here are some tips to do this. In case of minimalist design, your visuals should be minimalist as well. You should use very simple images showing your work. You should also embrace white space. Let the content breathe. And, lastly, you should use limited amount of examples. Otherwise, you will clutter your website.
The case of photos
Let me give you few web design tips for choosing the right photos. A lot of people use photos form stock bank. So, let’s start with this. Don’t worry, I will not tell you how incredibly stupid idea it is to use this type of assets. Instead, here are some web design tips, and design in general, to make the most of stock photos. First, use only those with certain quality standard. Just because something is for sale doesn’t mean it is good. Many stock photos look cheap and “stocky”. Don’t use these.
If you really want to improve your website, be willing to invest in it. Use your money wisely and be very very picky. How much picky? If you saw that stock photo somewhere else, pass on it. No matter how amazing the photo is, don’t use it if someone else is. One problem with stocks is that price is not the best way to determine their quality. The price is usually very similar. So, if you are not sure whether the photo looks “stocky”, ask some people you know.
You can also share the photo on social media and let the crowd help you. I’ve never tried this, but it can work. My last tip to avoid using “stocky” photos is to avoid photos that look like an advertisement. You know what I mean, bunch of people with fake smile looking right at you. Even you don’t take these photos seriously. And, chances are that other people will share your opinion. People usually don’t like ads. That’s why they use ad-blockers. Don’t impose upon them the same.
The last of web design tips for photos in general is … Avoid anything that is blurry or not sharp enough. I love to use free photos provided by websites such as Unsplash and StockSnap.io. These photos are beautiful. The only issue is that some of them are not as sharp as they could be. If you want to use these, take time to fix this. The good news is that these photos are in very high resolution. One way to fix this is resizing the image. Do you really need 4500×2500 photo?
Finally, make sure your visual assets are always related to the message of your design. We discussed this in the article about mistakes in designing cards. Meaning, if you are doing or selling X don’t use images showing Y. So, if you are app designer, show examples of app designs. It is okay to include some examples not related to you craft. Doing so can help you add some variety and spice to your portfolio. However, these examples should be in minority, not majority.
Optimize all assets
In the previous part, I promised some web design tips for improving performance. And, what is the quickest way to speedup your website than optimizing all assets. Today, web is strongly inclined to the use of large imagery. Landing pages with large hero images are quite common. That’s why of one my web design tips is about optimizing (compressing) images. It doesn’t matter whether you use images in jpg, png or svg format. Very often, you can reduce the size of all these images.
The best thing on this is that you don’t need to have any knowledge about it. There are many tools that are incredibly simple and will do the job for you. Let me give you few suggestions. These are the tools I use literally every day and in every project. The most popular format for photos is jpg, or jpeg. One tool I use is JPEGmini. This only potential problem with this tool is that it is paid. Free and web-based alternative is tinyjpg. Another alternative is compressor.io.
In case of png format, my favorite choice is PNGoo, tool built on pngquant. Alternative built on the same engine is Pngyu. For svg files, I use svgo-gui. This is node-based app that is unfortunately no longer maintained. However, that doesn’t mean that this tool is closed. You can use its online version. There are also plugins you can use in command line. However, I want to make these web design tips useful without deeper knowledge. So, I will skip these.
Optimizing assets in graphic editor
There are two more web design tips for optimize your assets I will give you. First, use your graphic editor. When you work with jpg images, you don’t need to export them with 100% quality. In most cases, 75% will work as well. Also, you can reduce the resolution of these images. In case of png, try to use 8-bit version. And, when you work with svg, use simple shape elements instead of paths. If you use paths, simplify them. Finally, use some external tool to remove unnecessary code.
Use srcset to make your images responsive
Another thing you can do to improve the performance of your website is using responsive images. This means two things. If you are showing images via CSS background property, use media queries. Don’t use the same image for all devices. Serve images with big resolution only to devices with large screens. For mobile user, use smaller versions or variants. Just this small change can make your website load much faster on mobile devices. What if you use img element instead of CSS?
In that case, I would suggest using img element along with srcset and sizes attributes. If you don’t care about IE11, you can use picture element. Then, you can use different source element to serve different versions of images. This element works in a similar way to img. You use srcset attribute to specify the image and media attribute to specify the resolution. Finally, you add img element as a fallback and wrap this markup inside picture element.
Working with picture element can be a bit difficult. Fortunately, I found this great and simple tutorial on CSS tricks. Don’t worry. It is not as hard as it may look like on the first sight.
Minify everything
The last but not least of web design tips is to minify everything that contains some code. This means your HTML, CSS and JavaScript files. Before you do that, make sure to create backups. This is not for the case something will go wrong. Minification is a safe process. The reason for creating backups is to have files you can work with in the future. Sure, you can always “beautify” the minified files. Still, it is better to work with two versions of assets – development and production.
Use development version to work on the website and ship production version. This is how developers usually structure their workflow. Take a look at some well-organized and maintained repository on GitHub. You will often see two specific folders – src and dist, or build. Src folder contains files for development. Code inside dist, or build, folder is for shipping or deployment. It is also possible that you will find repository only with src folder. Then, there is a task to make build.
There is one thing I should tell you about these web design tips and minification. When you apply them, the results can, and will, vary. Minification is one place when you can see this. If your website contains only few dozens lines of code, you will not see significant increase in performance. This is true even for larger projects. However, that shouldn’t be a reason for skipping these web design tips. Remember, to achieve perfect user experience, every millisecond matters.
Take time and refactor your code
I know that most of these web design tips should be simple and quick to implement. However, this one is too important. With time, the code for your website will grow in size. This is inevitable. Well, there are some ways to avoid it. The first one is quite brutal. Every time you will feel the code is too complex or big, you can hit the reset button. Meaning, you can erase all your code and start from scratch. This is probably not be best of web design tips you heard about, right? I agree.
This is why I prefer the second way, regularly refactoring the code. Chances are that these web design tips will read someone with small limited knowledge of coding, or programming. Refactoring is a process of restructuring and simplifying your code without changing how it works. In a simple terms, you take a chunk of the code and look for parts you repeat often. You extract this code into a function. Then, instead of repeating the whole snippet, you use this function.
This is a very simple example of refactoring. However, I hope it will give you at least some idea about this process. If you are interested in refactoring or you are in the situation when it is necessary, I wrote an article on how to prepare for it. However, refactoring is useful mainly in larger projects. So, I will end this last part of web design tips here. Another reason is that refactoring is more advanced topic and you might not need it. We will discuss this in-depth again in the future.
Closing thoughts on web design tips
This is it. These are the seven quick web design tips everyone should know about and implement. Also, most of the tips we discussed don’t require any deep knowledge. There is no excuse for not using them to improve your website. Well, except laziness. However, no amount of web design tips can help with that problem. Yes, we discussed some topics briefly. Still, I hope you have enough information and tools to take the first step. If not, let me know what do you need to learn about.
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 
Become a Patron
