How to Design a Website for Mobile and Desktop
Some parts of the content of your website are more important than others. That is just a fact. The Buy Now button is almost certainly more important than the entire About us page, and you'll need to focus on the user if you really want that sale. That's why we're here: you can call this a guide for beginners to control focus.
You will create your site so that the eye is naturally pulled from one step to the next.
My sister used to manage my focus strictly but quietly, telling me to 'return to work' fifteen to forty times in a single day. However, your users will not play music or “buckle up” to stop browsing your site.
You have to be drafted. The call to action — for example, the “buy” button — must look good.
How to Evaluate a Website Design: Contrast
The first and easiest way to catch the eye is to use contrast. By “contrast” I mean that the important elements of a design have to stand out in a meaningful way. Do you see what I did there?
Now there are different types of contrasts to discuss:
- Light / dark contrast
- Color contrast
- Size contrast
Most of them are pretty self-explanatory, but let's go over them.
Web Design tips: Light/Dark Palette
Bright things stand out from dark and vice versa. Pretty easy, right? Well ... that depends. If most of your site is pretty bright, it makes sense to make your call to action big and dark (or at least slightly darker than anything else).
However, there are many designs where a high light / dark contrast characterizes the entire layout and this contrast is used to give everyone a sense of structure. In this case, you need to use a different contrast to focus on people.
Design Solutions: Colors
Okay, that's self-explanatory. A splash of color or just another color is enough to make things stand out. In this example, color is used to avoid much typographic noise.
Web Design Tips: Size
Make the important keys bigger than other keys. Make your headline text bigger than other text. Size contrast can not only stand out but also improve the hierarchy on the page.
How to Design a Mobile-friendly Website: Images
No matter if it's about photography, illustration, painting or 3D-graphics, pictures are catching the eye. With a picture, you can draw the attention of each easily enough. The only real exception is images that are surrounded by other images.
Of course, you can also use them as stand-alone focus objects, but you can also use them to focus your eyes on other things, for example, text or buttons placed over them. You did not think that's just pretty backgrounds, right? That's how things might have started, but nowadays everything is much more calculated.
If you really want to do it all, call to action so that it looks like the picture is pointing to it. This is what your manager would call “synergy” and it tends to work, though it sounds so corporate.
Successful Website Design: Animation
And if you think we like pictures, let me tell you about moving pictures. No, but seriously, if nothing more interesting happens in a room, my eyes are inexorably directed to any television that is still on, no matter what. It could be sports, talk shows a day or even a soap opera, and I'll have trouble looking away. Most of us would.
Motion is so easy in the eye. It started as a survival reflex, and now all we have to do is know if Brian will ever regain his memory and marry Patricia, or if she'll be forever trapped by his evil twin, Drake. Use this reflex to your advantage by including some lightweight animations in buttons, helpful tooltips, and any text you really want to read first.
How to Make a Good Design Website: Convention
Finally, use the default behavior patterns of your user. As web users, most of us have learned to look for top-level navigation, low-level calls to action, and more CTAs. Placing important information and functions where people expect them is an absolutely valid strategy.
Also, remember to design for people who read from right to left or from left to right. For example, people who speak English usually look first to the left side of their screen. While there is something to be said to break the mold, never underestimate the power of simple but deeply rooted habits.
How to Make Design Website: Use Emphasis Sparingly
When everything is printed in bold, the bold text blurs rather than burning important information into the user's brain. If a page contains many images and you do not manage a photography portfolio, users may be distracted. And do not let me start using the animation too much. How do you expect them to read any text that is more than a sentence long when everything moves?
To truly direct and direct your user's attention to one or two things, you must eliminate or at least deemphasize things that might compete for their attention. Compete with other websites, not with your own content.