An intro to five technical aspects to get you started with user interface design for websites and web apps.
When I first heard about Webflow, I was at a design event in London having a conversation about prototyping tools with a web designer, and was impressed with his enthusiasm when talking about this Webflow design tool! I got curious, signed up that same day, and I immediately envisioned a world of opportunities and a strategic change to my career.
I immersed myself in the Designer canvas and consumed all the University tutorials. Still I couldn’t get the order of things and best practices to apply in the process. So I decided to study the basics of HTML & CSS which helped me to learn Webflow faster.
Looking back now I know you can learn how to structure websites with Webflow without going through the HTML & CSS learning process like I did. That’s why I decided to write down what would have helped me in my early days with Webflow. I hope it helps those who are starting the journey of mastering this amazing tool.
1. Box model
The general rule is: everything stands inside a box. In Webflow they are called Div Blocks. Understanding the box model is key in building responsive and complex layouts. Sizing div blocks correctly allows you to display the elements inside the way you want them to.
Margins, paddings & borders
We use margins to define the space around or outside a box and paddings to adjust spaces inside a box. We can also add borders to boxes if the design requires it. The size of a box will be the sum of border + padding + the size of the elements inside the box.
[By inspecting the element above on the browser(https://mirelaprifti.webflow.io/webflow-box-model-web-design), we can see the margin, padding and border displayed as below and expressed in pixels.
Width = 5px (left border) + 40px (left padding) + 450px + 5px (right border)
Height = 5px (top border) + 190px + 5px (bottom border)
2. Display
You can add many boxes inside a box that we’ll call a container. You can also choose how to display the boxes inside the container by using thedisplay property.
In the examples below the black box is our container.
Inline
When you use the inline display settings for the container, the elements inside start on a new line and occupy the full width of the container.
Flexbox
This is where magic happens! You have the flexibility to apply different rules, display boxes on a horizontal or vertical axis, align and justify as you please.
3. Responsiveness
Responsive design is mandatory! Always test your designs and check if they work properly on different devices. Webflow has seven default breakpoints that allow you to adjust your design elements for each of them.
4. Position
There are 5 different positioning properties you can apply to your elements and create any kind of layout.
Static : this is the default position of every element.
Relative : similar to static, it allows you to edit an element’s position and even make it overlap other elements.
Absolute : it positions a child element relative to its closest relative parent.
Fixed : similar to absolute positioning, it fixes an element relative to the browser window.
Sticky : the element behaves as relative and becomes fixed when you scroll to a certain point that you will specify.
5. Classes
Every element that you use and style gets a class. Elements that share the same class will be styled equally. It’s important to properly name your classes especially when you work on big projects.
In the example below, I have assigned to the black box the class “Container”.
You can also create combo classes if you want to apply small changes to a single element without affecting other elements with the same class. By adding the class “flex” below, I changed the display settings of the black box, maintaining the styling elements inherited by the class “Container”.
Knowing these basic concepts will make you feel more confident when using Webflow. Everyone has their own learning pace and this is only a starting point. You will go through a lot of trial and error before you’re ready to launch your first project online.
If you enjoyed this article, you may start exploring Webflow using my affiliate link to create your account.
If you want to introduce Webflow to your company workflow or just need to improve your design skills, get in touch and we can sort it out together.
Top comments (0)