👋 Oi, mga repapips, Brian Dys here! I love music, photography, and creative stuff like UX design and art. This is a place where I collect my thoughts and works. Apart all these, I’m Jaycelle’s better half and Bryce’s dad. 🥰
Let’s frame your question in the following:
- You’re applying for a web development company
- Your portfolio currently would not demonstrate your superpowers
- But a Test Project will
- You are applying for a User Interface Designer position
- In the company, they have a UX Researcher and a UX Designer in the team
- You would like to foresee the Test Project that they will give you to be able to prepare for it
One might categorize CSS experimentation into two:
- Static experimentation (visual design – layout colors, typography)
- Interactive experimentation (animations, interactivity)
Now, both could be overwhelming especially if you’ve already gotten past the visual design properties.
But yeah, that’s the way it is – whatever you’re building, you just have to take it one block at a time to be able to manage it – and lessen the overwhelmingness.
I could see this question in two aspects: the designer’s POV and the audience’s POV
- The designer’s personal POV about replicating and modifying depends on her philosophy.
- Is it OK to copy just to get it done? Is it OK to spend time to reinvent the wheel? What will the designer learn from it?
- What will the designer’s audience think about the practice of copying visual designs? What will the audience feel about a familiar experience in the design?
There are many different considerations when someone seems to have a similar UI design. I could see the thin transparent line all over the spectrum.
The most common approach in using media-query, which is also strategic, is abiding by the Mobile First principle.
- Begin your non-media queried style for mobile
- Add a media query for the next viewport size you’re designing for. For example, tablet size then desktop size
I mentioned strategic because it also tackles the concept of Less Is More or in other words, decluttering or prioritizing.
Reading about the Distributed Web.
Since you’ve already mastered the basic languages of web development (HTML, CSS, JS), you are now basically skilled as a Front-end Designer.
Now, how to be a skilled UI Designer?
- Learn how to interpret the Product Requirement Document
- Learn how to translate the Task Flow Diagram into individual Wireframes and eventually into an Interaction Diagram
- Learn how to transition the designs to the Visual Designer and Front-end Designer/Developer