Web design tips

Image filters

Playing with images may bring lots of amazing effects for the layout and help to create stunning results. CSS allows using lots of filters on the images to help developers play with the graphic without changing it in Photoshop. Let’s take a look at the filters we may use: In the example above, you can see seven different filters used in the same image.

Full height and full width

If we would like to set our app or website adjusted to the viewport, vh and vw units make it much easier. vh means it’s 100% of the viewport height, and vw means the 100% width of the viewport. Let’s check how it works in a real example: In the example above, I set the blue-box element to 50vw and 50vh, which means it should have a 50% of the viewport width and 50% of the viewport height, and if you resize the viewport you may notice how it adjusts. Cool, right?

Clip path

Sometimes the designer went a little bit more creative, and now you have to put an image in a specific shape, like the triangle or other. For this, you could use clip-path property! Let’s take a quick look at how it works: In the example above, I created a circle, eclipse, and a custom polygon shape.

Truncate the string

I hate when my text doesn’t suit inside the div, and it goes out anesthetically. In Javascript, there are a few ways how we can manage it but, did you know that it’s possible to cut the text in CSS as well? Let’s check it out: Above, you can see how CSS can cut the text and finish it with …. I used overflow: hidden, white-space: nowrap, and finally to got three dots, I used text-overflow: ellipsis.

Shape outside

There is another great feature that came with CSS, and it’s not very common. It’s shape-outside property. It decides how content will wrap around the floated element. Let’s take a look at how it works: In the code example, you can see that the text overflows the circle. We set the value of shape-outside to circle 50%, but it’s also possible to set an image, triangle, square, etc. Check it out and play with it!

Parallax scrolling

Parallax is a very common trend in modern web design. It’s about scrolling background content at a different speed than foreground content when we scroll the page. Let’s see how this magic can be done using CSS: In the example, you can see how our text and background image are moving differently. We used transformZ, to fasten one element and slow another one. Looks good, right?

Blend modes

We can do lots of cool stuff in CSS right now, and one of them is a blend mode. There are two properties for blend modes: mix-blend-mode, which defines blending between element and element behind it, and background-blend-mode, which defines blending between the background image and background color of the element. Let’s take a look at how it works: In the code above, we set image and header with text. The text is an element that is blended with the image. We used overlay value, but there are 15 other values that can be used. Now, let’s check the background-blend-mode code example: In this case, we can see how the background image got blended with the color. The first image is before blending, and the second one is after blending. Isn’t it amazing what we can do with CSS?

Vertical align with flex

Since the Flexible Box Layout Model appeared, it became very popular, because it makes positioning and aligning elements easier. Using flex (Flexible Box Layout Model sub-property) made vertical alignment fast, nice, and easy before we had to do it a little bit around in many cases. Let’s take a look at code example for vertical positioning with flex because it allows doing a lot with alignment. As you can see in the code above, we used display: flex and align-items: center, justify-content: center to ensure our child element will be exactly in the center of the parent element. Easy, right?

WPForms

It is important to have a contact form on your website so that users can contact you without facing any hurdles. You should have this plugin on your website because it will make it user-friendly. It also allows you to make popular marketing and payment platforms that will keep everything in hand for you.

Communicate what you want to your designer.

Let’s say you have a grand idea for a feature of your website. The better you’re able to explain it to a designer, the more likely the final version will turn out like you envision. Because it’s a team effort, web design doesn’t just involve technical skills, but also communication skills. Communicating what you want for your site, in detail, is the direct path to getting a satisfactory design. Web designers aren’t mind readers, after all. In the AUSMAIDS example by Top Level designer akdcreative above, it seems as if the client knew they wanted a widget that allowed the user to input the numbers of rooms and the frequency of the visits. The designer took that idea and made it look good. That’s the ideal collaboration between client and designer, and the stellar final product shows it. Do:

  • Plan out what you want beforehand. Either write what you want on paper or create a wireframe. Both help you remember everything and they give your designer a solid jumping off point.
  • Keep an open mind. It’s your designer’s job to make your website as great as possible, so keep an open mind to their suggestions, even if it’s different than what you anticipated. Chances are, they know something you don’t. Don’t:
  • Be vague or generic. Using vague and generic terms like “colorful” or “interactive” don’t really say much. Which colors? How do users interact? Be as specific as possible—or agree to leave it up to the designer.
;