I love front-end engineering. This portfolio is one of the more visually complex designs, but I also like clean and simple design as well. Here are some tips that can make even simple projects stand out. I learnt these along my front-end engineering journey from many designers on Twitter/X and other platforms.
- Never use pure black or white. It is quite straining on the eyes and also makes for bland designs. Use variants of the colors which play with hues, warmth, coolness, etc for not only better accessibility for users (especially at present where screen times for everyone are through the roof), but also more control over the general aesthetic and vibe that the UI or design system gives. For example, for the website of a coffee shop, you may want to use a white with just a tinge of brown/yellow undertone, which would not only work well with the theme but also other elements such as images of the products which may also have similar undertones.
- Picking a good font is hard. You want it to be different, but also generic enough that it can be used in all sizes, weights, and text hierarchies (unless you use a two-font type system). Funky ones (including handwritten styles, overly geometric fonts, fonts with unconventional serifs, and wide/narrow fonts) generally work well only for headings, and should never be used as a primary font for all text. It's the subtleties of the font that usually make all the difference for general use cases (i.e., not headings or display fonts). For example, take the beautiful simplicity of Inter, which is often claimed to be the best no-nonsense no-brainer font. In recent months, Vercel's new font has also been gaining a lot of popularity, with its Helevetica-ish Swiss design principles with a bit more playfulness.
- There is a reason that we have standard layouts for common sections such as hero sections, pricing, headers, footers, etc. This is not because people like to be boring or copy-cats. It is because these are tried and tested layouts based on how people with all levels of tech savviness interact with modern websites. User research is based on user expectations and what would be intuitive to the user. This is especially important to remember if the website is for a product (most probably a SaaS) where user retention, clicks, and signups are all crucial KPIs. For example, there is a reason why more and more hero sections look the way they do, layout-wise. It is because they convert users to customers really well, and that is what matters at the end of the day, not how imaginative a design is. Of course, this does not necessarily apply to concept websites, design/engineer portfolios, and other such websites where the focus is on imagination.
- Stick to a design philosophy. Remember that as much as you can let your creativity and imagination run wild, you need to structure those ideas in a design system or if not a proper system, at least a philosophy. It is better to stick to a few key elements/principles than cram all ideas, animations, and layouts into one project. Users do like unconventional designs, but not more than they like predictability and consistency. Especially in the earlier stages of a design, it is indeed hard to limit yourself to a style, but that's when doing so is most important.
Hope you liked these, I will be back soon with more :)