As a UX/UI designer, I think it is of great importance to keep a fresh eye for the new things and trends in the industry. Therefore, I practiced 5 UI design trends based on the UX Collective article "A guide of UI design trends for 2021" by Diana Malewicz.
Glassmorphism
Tool used: Photoshop
Glassmorphism has been a hit for a while now. This effect was easier to make than I expected. It took me about 10 minutes to finish and the final result looks quite nice. There are a lot of tutorials available on YouTube, I used this one if you are interested 👉: https://www.youtube.com/watch?v=MysgKx3NWuQ&t=97s
However, in real life scenario, this kind of design only applies well on partial parts rather than the whole page, such as bank card or sign in plate, because when we use our digital devices, they are usually presented full screen.
The inspiration for this design challenge comes from my interest towards plants due to constant working-from-home, and I know that I am not the only one. I just think it would be great if there is a website for people to online shop plants, learn the care tips and interact with others have the same interests. I might continue to work on this project when I have some time, so stay tuned!
3D Animation
Tool used: Spline
Spline is a great online 3D animation generator. This is my first time encountered into 3D design and I think it was such a fun and added so much vividness to the design. This one was quite basic and I plan to practice more 3D design in the future.
Here is the tutorial I took👉：https://www.youtube.com/watch?v=zfpmc-NnjXQ
Brutalism
Tool used: Figma, Photoshop
My understanding: towards brutalism are
Headline fonts in bold and black;
Bold colour, but keep it minimal and simple. Within 3, basically;
Concise and neat layout;
Sharp contrast.
I come up with the idea to redo the BBC News page cuz I wanted to do a design challenge for news. However after I found it didn't go very well with serious news after I put BBC red as the background colour, so I turned to Art and Entertainment. I personally like how this design turned out and it gives me the feelings of modern, arty and bold.
In terms of composing, I tried to offload anything unnecessary and make it look self-explantory. So I went for white bolded san-serif ➕ single hero image. I chose the font close to BBC NEWS to give a people heads up.
Brutalism design works well on head pages as it's very eye-catchy while it's not so applicable for the pages require a lot of reading. The colourful background will lead to the pain in the eye if staring for too long.
Minimalism
Tool used: Figma Photoshop
Four principles for minimalism design:
Low-saturation background colour;
Less is more, keep the content simple;
Utilise proximity, letting the eyes to classify the information;
Use clear grids to express hierarchy, it's usually good for content-reading.
The concept of this design challenge also come from Plenty, our first design in this post.
I only kept the essential info that a buyer would care the most on the product tour page including product name, price, size, scenario, care tips and two call to actions(buy now and add to cart). There are two quick keys for sharing and liking on the top right, which is the common design for e-commerce platform.
I also used coloured icons to explain growing conditions in care tips to add more fun in reading the product info.
Geometric
Tool used: Figma, Photoshop
Finally comes to the last one —— Geometric design. Usually this would involve a lot of shapes and colours. Bauhaus is one of the most commonly used elements.
I created a monthly report cover page using this effect, creating contrast by bright gradient tile-blue background and black font. Using some lines to assist, adding more details to the page.
Three different sizes of the page are scaled to see how it looks on different devices.
Thanks for watching, hope you learned something from this blog!
Commentaires