Dilemma of being Creative and Practical when designing User Interfaces
This is a dilemma that every designer has faced.
While creating UI specially when you are new to the profession you want to create the most beautiful looking UI.
Let me bend that text, make this awesome radial gradient, use a grunge texture, place the image in an unusual way. Hmmm, still something is missing…
Ha, motion it is, let me add a cool parallax effect in the hero section, how about image fading in the screen from the left side.
And a 100 different things.
You want to create a landing page that people just love scrolling and which designer doesn’t? But then comes the time of developing the design.
And you realize most of the cool things you decided to design are not practical to develop for that project. Most of us have been there including me.
Any design is possible to develop through CSS and Javascript.
But just because anything can developed doesn’t mean it should be. It depends on various factors like scop of the project, budget, project deadline etc …
The solution is to find a sweet spot between practical design and creative design.
From my experience I have learned where we have to limit our creativity and where can we go crazy.
Layouts (Cannot be too creative)
Website layout is something which requires a lot of effort for developers to develop. And it also has to be responsive for various devices. While designing, you might feel like placing elements randomly to make a unique design. But while developing everything is a box inside another box. If you wish to make a complex layout maybe you should discuss it with the developer and see if it is possible to develop it according to scope of the project.
Gradients (Depends)
Gradients is a great visual design element. Figma can generate CSS for linear gradients. But when creating complex angular or radial gradients it can be difficult to replicate the same for the developer using CSS.
Exportable elements (Go crazy with creativity)
Any element that developer just have to export whether it is images, vectors, background images, icons etc. You can go all in with your creativity.
Section appearing on loading (Can be creative)
If you think your design is simple because of the constraints or brand guidelines. And you want to make it more lively, try adding some simple animations like section loading on scrolling, not something designers can do directly, but you can ask the developers to make such effects.
Typography (Can be creative)
Good type is something which makes the design look good. Doesn’t require any effort from the developer neither from the designer. The only effort is in finding the good typeface.
Hover effects (Can be creative)
Simple hover effects can create good delightful experience. Not too difficult to develop also.
Animations (Depends)
Animations used in the right way will always create a better UX. It makes the UI more engaging for the user. So depending on the type of project you can have a discussion with the developer or stake holders and see how much creative you can be with animations.
This were some of the things that can be considered while being creative. As a designers it is important to learn what constraints does developer face while developing the UI.
One way to learn that is by learning a no code tool. I have been learning and experimenting with Webflow since last couple of months and I have learned a lot about web development concepts. I don’t know coding but now I have pretty good idea about things like layouts, creating classes and responsiveness of the website.
Constraints will always be there but don’t let it hinder your creativity. Solution is to start with creative options, discuss it with developers and stakeholders and proceed accordingly.
That were my 2 cents about being creative and practical when creating user interfaces.
