Ways to make the development of a layout designer in a web studio easier

Started by lirik, Apr 10, 2023, 06:41 AM

Previous topic - Next topic

lirikTopic starter

As the only full-time layout designer and frontend developer in the studio with a variety of projects, including landing pages and online stores, I am required to produce quick results.
However, this often results in poor code quality and messy markup. To meet the project requirements, I frequently have to implement features like calculators, timers, form validators, sliders, and animations using bxslider and CSS transitions.

I am currently using less, coffeescript, emmet and learning Git, however, the design constraints make it difficult to use ready-made grids which affects the speed of my work. It takes several days to create main pages and up to a week for a complete project.
Do you have any recommendations on how to optimize my workflow and speed up my work process? Additionally, which layout methodology should I adopt - BEM, CSS or any other?


It suggests using BEM as a CSS implementation of Shadow DOM before full-fledged web components appear. The author prefers their own modification of BEM and recommends using SASS/LESS for this.
For layout, the author suggests using Jade (JS) or Slim (Ruby) to reuse code and accumulate options for solving each problem. It is important to study more serious projects, such as Angular or Amber, to learn the latest trends in UI development. As you grow in your career, it becomes more important to organize your work and take breaks, and changing programming languages can help find new solutions to problems.

Additionally, paying attention to design patterns and writing code on paper can help avoid artistic searching and make code subordinate to logic. The author is currently working on a product for UI developers and is interested in hearing about difficulties or routine tasks in the field to improve their work.


1. Implement small sections of code.
2. Utilize the integrated development environment (WebStorm) and its functionalities.
3. Take breaks to refresh your mind, which will aid in resolving issues more efficiently.
4. Utilize gitflow alongside git to automate commands.
5. Learn from Developer tools by enrolling in a course.
6. Engage in stimulating tasks.
7. Analyze how other programmers solve comparable problems.
8. Employ Live edit.
9. Consider using a second monitor if it benefits you.


To my understanding, your effort to complete the task with unique projects is unnecessary.
In case of a standardized process, some of the code can be reused across multiple projects, whereas in your case everything has to be built from scratch.