HTML • CSS
Front-end & webdesign
Hmmh Multimedia AG is a e-commerce agency.
I worked on implementing the webpage solution in code for showcasing their projects & clients.
Hmmh Multimedia AG is an e-commerce agency.
I worked on implementing the webpage solution in code for showcasing their projects & clients.
My role
UX/UI Designer that also does front-end code
Team
1 Front End Developer, 1 Scrum Manager
Platform
Web, mobile
Timeline
3 months, 2019
Tools
Jira, Bitbucket, Sourcetree, Git, Xd
Layout
Layout
Layout
For the hmmh Case Study webpage a rough layout was made. It contained all the blocks that could be of interest to a potential client when browsing through the hmmh portfolio projects.
Replacing one of the components with a new one
Replacing one of the components with a new one
Replacing one of the components with a new one
I created a new component which showed the project outcome on different screens. And also created the different device frames as vectors.
I created a new component which showed the project outcome on different screens. And also created the different device frames as vectors.
Responsive Behaviour
Responsive Behaviour
Responsive Behaviour
I used media query to create the responsive behaviour of the tiles.
I used media query to create the responsive behaviour of the tiles.
UI Coded Library
UI Coded Library
UI Coded Library
The agency had its own coded UI Component Library in Pattern Lab. This helps break interfaces down in small parts by following the Atomic Design model.
The agency had its own coded UI Component Library in Pattern Lab. This helps break interfaces down in small parts by following the Atomic Design model.
Agile UI Development
Process
Agile UI Development
Process
Agile UI Development
Process
We used Jira and the Kanban board system and organized tickets for the project.
We used Jira and the Kanban board system and organized tickets for the project.
A designer’s approach
to build the UI in code
A designer’s approach
to build the UI in code
A designer’s approach
to build the UI in code
I have split the whole webpage into a 7 column grid and all the parts into tiles. This approach was influenced by the css grid.
Using the CSS grid
Using the CSS grid
Using the CSS grid
The CSS grid proved to be very helpful for consistency across platforms for more complex layout design.
The CSS grid proved to be very helpful for consistency across platforms for more complex layout design.
Containers & alignment
Containers & alignment
Containers & alignment
Some containers proved to be more challenging than the others when it comes to alignment.
Some containers proved to be more challenging than the others when it comes to alignment.
Learnings
Learnings
Understanding better the front-end development workflow
Understanding better the front-end development workflow
Understanding better the front-end development workflow
While working on this project, without any front-end development prior experience I had to piece together and figure out the workflow. Of course I had help in finding out the different steps.
While working on this project, without any front-end development prior experience I had to piece together and figure out the workflow. Of course I had help in finding out the different steps.
Still every front-end developer colleague was having a slightly different process. On top of this the combination of softwares and UI library was also specific to this project.
Still every front-end developer colleague was having a slightly different process. On top of this the combination of softwares and UI library was also specific to this project.
Challenges
Challenges
Challenges
Things got quite challenging when working with sass, scss, Handlebars and Mustache. I received support in tackling these aspects from my front-end developers colleagues. :)
Things got quite challenging when working with sass, scss, Handlebars and Mustache. I received support in tackling these aspects from my front-end developers colleagues. :)
This project was helpful to gain more understanding, as a designer for the front-end development phase involved in building products.
This project was helpful to gain more understanding, as a designer for the front-end development phase involved in building products.