Design Process

My design process differs slightly from ones of a traditional visual designer and frontend engineer. Here some details on how I like to work.

Career

In the corporte world, I often felt there wasn't a career path that would reward my love for code and design.

To progress in salary and power, I would often have to shift to more traditional managerial paths.

Design & Code

Why I decided to focus on designing in code and make it my specialty.

UI vs UX vs Product Design

I consider myself a UI Designer. Not a UX or Product Designer

Take Home Tests

When looking for a job, I am often asked to do a test before proceeding to the next phase of the job recruiting process.

Skills

I am a cross between a Visual Designer and a Frontend Engineer

MeVisual DesignerUX DesignerProduct DesignerFrontend Engineer
ToolStorybook + Visual Studio CodeFigmaFigmaFigmaVisual Studio Code
Data UsedReal Data or advanced mockBasic mock dataBasic mock dataReal Data or advanced mock
Time to produce design2x1x1x1x—
Time to produce working page1x———1x
PrototypesSophisticated prototypes in codeSimpler prototypes in Figma or InVisionSimpler prototypes in Figma on InvisionSimpler prototypes in Figma or InvisionPrototypes in code
Cares forQuality in UI designQuality in visual designUser fulfilling its needUser archiving tis needsFunctionality and meet deadline

Do

  • YES Design in code with real data
  • YES Visual Design
  • YES UI Design
  • YES Rapid prototypes in code, hi-fidely, with live data
  • YES Production ready frontend code
  • YES Frontend tests
  • YES UI component libraries (both UI design and code)
  • YES Animations in code
  • YES No loss of fidelity between the design and the final shipped code
  • YES Individual contributor, hands on
  • YES Mentoring
  • YES Pixelpushing
  • YES Visual Design polish in code
  • YES Storybook
  • YES Work Remote
  • YES Work Async

Not

  • No A UX designer
  • No A Full-Stack Engineer
  • No A Product Designer (at least the UX side of it)
  • No Expert in research
  • No Wireframes
  • No User persona
  • No User journey
  • No Interviews
  • No Flows
  • No Invision prototypes
  • No Manager
  • No Meetings
  • No Stand ups
  • No Politics
  • No Work In-Office