I. Analysis of the design draft

Let’s get the latest design and start drawing. Yes, draw on a piece of paper (preferably in pencil, for later nesting changes).

1. Take a look at the component library (if the designer has one)

This part of the first glance, have a memory. Everything in the component library is basically the same: primary headings, secondary headings, body text, bold text, dividers, buttons, heads, drop-down menus, color gradients, and so on.

2. Look at the most important home page of the entire project

If you’re a professional UI engineer in the front end, you need to get your pencil out and start drawing on your design. But not everything at the beginning, the first thing to draw is the big frame, inside the small elements, components and so on can not be drawn. From big to small, step by step.

Yes, it’s that simple, unpretentious, but an essential and effective step in the optimization process.

Two, build the frame

(1) How to elegantly nest DOM elements

Then we have to figure out which way to implement the layout. Building the largest external framework is the first and most important step in the front-end project, but most people will not calm down to understand the principle of this part, as a programmer this is a very dangerous phenomenon. I mean, a hanging garden has to have a solid foundation.

Otherwise, the following will happen:

Now there are many competing products for each category, and users are very picky and impatient. If you break a small part, users will feel annoyed and some won’t even use it again. So this requires us to reach a critical standard in terms of user experience, which is one of the reasons why so many big companies strive for perfection. With the rapid development of society, we actually find that more and more users will like to use simple, conventional classic products to ease the inner fickleness.

Here’s another word from front-end programming thinking to apply to UI design and user experience: load on demand.

We imagine that we are now outside a villa, and what we see is a big house. Then we open the door into the villa to find: eh?? The villa also has several halls, and then we choose one hall to walk into, eh?? There were many more doors in the hall, so we chose one to open and finally entered the room.

Similarly, when users first open the project, we need to let them simply see one or several elements, which is much better than exposing all elements outside. Firstly, it will enhance the advanced feeling of the product, and secondly, it will make users feel more comfortable mentally. But with so few elements, are we cutting our own features?

And it isn’t.

Instead of cutting features, we need to hide some secondary features, but have a guide for curious users to discover and mentally tired users to ignore. “Load on demand” is the way it works. Display corresponding functions according to users’ needs, thus saving users’ energy and time, improving users’ efficiency, and bringing a lot of surprises to curious users.

Specific implementation is: users according to their preferences, needs and the corresponding elements to do an interaction, found: hey?? It turns out that this element can do something else, that several new elements can pop up, or that different interactions can trigger different functions, mini-animations, etc. Then click on a new element that pops up to realize the jump, taking the user to the place they want to go.

(2) what kind of layout is used

Back to business.

I chose to implement the entire layout in Flex. Of course, depending on the project, you can also choose other layout methods.

HTML code:

<body>    
    <div class="wrapper">        
        <div class="left"></div>        
        <div class="right"></div>    
    </div>
</body>
Copy the code

The CSS code:

.wrapper {    
    width: 100%;    
    height: 100vh;    
    display: flex;
}

.left {    
    width: 300px;
    background: #8A2BE2;
}

.right {    
    flex: 1;    
    background: #DDA0DD;
}
Copy the code

First, look at the diagram below. The project is a left and right layout diagram, so we have two divs, left and right.

The two key properties in the CSS code are display: flex and flex: 1; We set up the Flex environment in the outside container, then fixed the left width 300px and applied Flex: 1 to the right to adjust the remaining width to fill the screen horizontally.

For reference: css-tricks.com/snippets/cs…

There is also a footer on the left side, so we need to split it up and down on the left side, but since the footer is supposed to be a fixed height, we need to make the height of the left side of the tree adaptive so that the content on the left side fills the screen height:

HTML code:

<div class="left">    
    <div class="tree"></div>    
    <div class="footer"></div>
</div>
Copy the code

The CSS code:

.left {    
    width: 300px;    
    display: flex;    
    flex-direction: column;
}

.tree {    
    flex: 1;    
    width: 100%;    
    background: lightblue;
}

.footer {    
    height: 50px;    
    background: coral;
}
Copy the code

We know that horizontal adaptive layout can be done with display: flex and flex: 1. Vertical layout is also done with an additional step: change the direction of the Flex alignment on the container, flex-direction: column, which controls the vertical layout.

Ok, first step, we are done, now we have the big picture:

Effect: