UTRO Studio
UTRO
STUDIO
STUDIO
tools / software:
Tilda Publishing, CSS / HTML
duration:
1 month (design phase),
followed by 2 weeks of development
followed by 2 weeks of development
team:
In addition to me, the following people were working on the project:
Hanna - UX / UI Designer
Oleg Kulinkovich - Project manager
Hanna - UX / UI Designer
Oleg Kulinkovich - Project manager
my role & responsibilities:
Role: No-code web developer
Responsibilities: website development, based on provided design layouts utilizing Tilda Publishing platform. Basic optimization for search engines.
Responsibilities: website development, based on provided design layouts utilizing Tilda Publishing platform. Basic optimization for search engines.
requirements:
- Home page with a branded video intro on the first screen and a portfolio gallery
- Awards listing page with media mentions
- " About us " page with team members
- Two language versions: RU and EN
the goal:
Develop a responsive website with eye-catching unique design based on UTRO corporate identity. Pay special attention to the mobile version.
about the project:
UTRO Studio offers solutions in architecture, landscape, spatial development and product design. They are experts in the improvement of public spaces and the revitalisation of historic buildings and areas.
Developing Process
We were tasked with developing a website for "UTRO Studio" that required a unique design within a tight deadline. To expedite the development process, we decided to utilize the no-code platform called "Tilda." This platform offers an API integration with Figma, enabling seamless transfer of custom design blocks from Figma to Tilda. One of the key advantages of working with Tilda is its extensive library of pre-configured standard function blocks. These blocks can be further customized using CSS and JavaScript, providing flexibility in design implementation.
With Hanna, our skilled UX/UI designer on the project, granting me access to the approved site layout, I began transferring and adapting the design onto the Tilda platform.
With Hanna, our skilled UX/UI designer on the project, granting me access to the approved site layout, I began transferring and adapting the design onto the Tilda platform.
Key Features
- A full-screen sticky slider, composed of overlapping blocks, was implemented to remain fixed as the user scrolled through the 'portfolio' section
- Full responsibility with auto-scale feature on sizes 1200-MAX that means that design will be looking the same size on different resolutions on big displays
Final Layouts
Design adaptation for all basic devices (mobile phones, tablets)
Mobile layout
Adaptive design for all major devices using Bootstrap framework grids for design layout.
Inner Pages
Final Thoughts
Working on this project provided me with a valuable and intriguing experience. Typically, when developing websites on no-code platforms, I handle both the development and design aspects myself. However, for this particular project, we had the talented designer Hanna onboard. It was fascinating to witness the collaboration between a designer and a developer while solely focusing on development.
As a designer, one of my main takeaways from this project was gaining an understanding of what could realistically be implemented by the developer and recognizing elements that may not be feasible or too resource-intensive. On the other hand, as a no-code developer, I learned how to effectively communicate with the designer about why certain features would present challenges or incur high costs in terms of implementation resources. This allowed me to suggest alternative solutions instead.
As a designer, one of my main takeaways from this project was gaining an understanding of what could realistically be implemented by the developer and recognizing elements that may not be feasible or too resource-intensive. On the other hand, as a no-code developer, I learned how to effectively communicate with the designer about why certain features would present challenges or incur high costs in terms of implementation resources. This allowed me to suggest alternative solutions instead.
Thanks for watching!
SOME FEATURED
PROJECTS
WEBSITES
