Back to top

Design Resources 2023

Design Resources 2023

Design Resources 2023

Apr 22, 2023

Apr 22, 2023

Apr 22, 2023

Internet can be a very resourceful place, and one thing I can stand by whenever I am in need of a solution/support is that:

"If I can think of a problem, chances are there's someone out there who also thought of the same problem, which also means someone tried solving it too."

That being said, here are some of my favorite resources on the internet that served me well during the times I did encounter a problem that needed to be solved.

  1. progression.fyi
    When I joined my current workplace, our design team was small, and comprised of mostly product designers (vs now having dedicated research, marketing, and UX writing roles) and had no career ladder in place (since we didn't have a Design Director). Over the years, I have found this resource super helpful to better understand what steps I should be taking in the context of my current workplace to advance my career. My favorite? this Figma Product Design Ladder

  2. Reforge Artifacts
    Creating a roadmap? Customer journey map? User research insights presentation? PRDs? You see where I am going with this? This website has everything - all the artifacts you can think of, for any discipline you can think of, from big companies. Highly recommend!

  3. checklist.design
    I am not the biggest fan of checklists in general, because they sound great on paper but in practice (at least for me) I get too absorbed by a project/timeline and then it becomes a chore to me. But this is a pretty good resource for someone early in their career and wants a good 'to-go' checklist for the most common experiences and flows (like Login, checkout, 404, etc.). I say 'for someone early in their career' because with time a lot of these become part of muscle memory when working on a project.

  4. calltoinspiration
    Competitor review in my day-to-day has been a huge lifesaver - depending on the kind of user, what they are already used to using ('mental model' for a more design school-y term) has a huge impact on how they might use your product too. This website has a great collection of real world examples of different sections/layouts/components across a bunch of good product experiences.

  5. Include - Figma a11y plugin
    I have for a long time struggled to find a good a11y plugin - partly because a lot of it I felt couldn't be documented in design (such as focus order, landmarks etc.) without creating additional overhead of annotating every element. This plugin does exactly that - helping quickly scan and annotate alt texts, focus order, landmarks, heading order and everything else.

  6. Eightshapes Specs
    A lot of it has been automated by Figma auto-layout today, but working with a distributed team (I work with an engineering team based in Ukraine) can sometimes have communication gaps, esp during the handoff process - sometimes there are things that are not annotated and the devs ignore it unless explicitly mentioned. This plugin automates annotations for specs, variables, tokens, components etc.

  7. component.gallery
    A one-stop shop for component documentation, usage, specs, and everything in between, searchable by individual components across all public design systems.

This is by no means an exhaustive list, instead resources that I have found myself using more than once in my day-to-day, hope they help you too!

Internet can be a very resourceful place, and one thing I can stand by whenever I am in need of a solution/support is that:

"If I can think of a problem, chances are there's someone out there who also thought of the same problem, which also means someone tried solving it too."

That being said, here are some of my favorite resources on the internet that served me well during the times I did encounter a problem that needed to be solved.

  1. progression.fyi
    When I joined my current workplace, our design team was small, and comprised of mostly product designers (vs now having dedicated research, marketing, and UX writing roles) and had no career ladder in place (since we didn't have a Design Director). Over the years, I have found this resource super helpful to better understand what steps I should be taking in the context of my current workplace to advance my career. My favorite? this Figma Product Design Ladder

  2. Reforge Artifacts
    Creating a roadmap? Customer journey map? User research insights presentation? PRDs? You see where I am going with this? This website has everything - all the artifacts you can think of, for any discipline you can think of, from big companies. Highly recommend!

  3. checklist.design
    I am not the biggest fan of checklists in general, because they sound great on paper but in practice (at least for me) I get too absorbed by a project/timeline and then it becomes a chore to me. But this is a pretty good resource for someone early in their career and wants a good 'to-go' checklist for the most common experiences and flows (like Login, checkout, 404, etc.). I say 'for someone early in their career' because with time a lot of these become part of muscle memory when working on a project.

  4. calltoinspiration
    Competitor review in my day-to-day has been a huge lifesaver - depending on the kind of user, what they are already used to using ('mental model' for a more design school-y term) has a huge impact on how they might use your product too. This website has a great collection of real world examples of different sections/layouts/components across a bunch of good product experiences.

  5. Include - Figma a11y plugin
    I have for a long time struggled to find a good a11y plugin - partly because a lot of it I felt couldn't be documented in design (such as focus order, landmarks etc.) without creating additional overhead of annotating every element. This plugin does exactly that - helping quickly scan and annotate alt texts, focus order, landmarks, heading order and everything else.

  6. Eightshapes Specs
    A lot of it has been automated by Figma auto-layout today, but working with a distributed team (I work with an engineering team based in Ukraine) can sometimes have communication gaps, esp during the handoff process - sometimes there are things that are not annotated and the devs ignore it unless explicitly mentioned. This plugin automates annotations for specs, variables, tokens, components etc.

  7. component.gallery
    A one-stop shop for component documentation, usage, specs, and everything in between, searchable by individual components across all public design systems.

This is by no means an exhaustive list, instead resources that I have found myself using more than once in my day-to-day, hope they help you too!

Internet can be a very resourceful place, and one thing I can stand by whenever I am in need of a solution/support is that:

"If I can think of a problem, chances are there's someone out there who also thought of the same problem, which also means someone tried solving it too."

That being said, here are some of my favorite resources on the internet that served me well during the times I did encounter a problem that needed to be solved.

  1. progression.fyi
    When I joined my current workplace, our design team was small, and comprised of mostly product designers (vs now having dedicated research, marketing, and UX writing roles) and had no career ladder in place (since we didn't have a Design Director). Over the years, I have found this resource super helpful to better understand what steps I should be taking in the context of my current workplace to advance my career. My favorite? this Figma Product Design Ladder

  2. Reforge Artifacts
    Creating a roadmap? Customer journey map? User research insights presentation? PRDs? You see where I am going with this? This website has everything - all the artifacts you can think of, for any discipline you can think of, from big companies. Highly recommend!

  3. checklist.design
    I am not the biggest fan of checklists in general, because they sound great on paper but in practice (at least for me) I get too absorbed by a project/timeline and then it becomes a chore to me. But this is a pretty good resource for someone early in their career and wants a good 'to-go' checklist for the most common experiences and flows (like Login, checkout, 404, etc.). I say 'for someone early in their career' because with time a lot of these become part of muscle memory when working on a project.

  4. calltoinspiration
    Competitor review in my day-to-day has been a huge lifesaver - depending on the kind of user, what they are already used to using ('mental model' for a more design school-y term) has a huge impact on how they might use your product too. This website has a great collection of real world examples of different sections/layouts/components across a bunch of good product experiences.

  5. Include - Figma a11y plugin
    I have for a long time struggled to find a good a11y plugin - partly because a lot of it I felt couldn't be documented in design (such as focus order, landmarks etc.) without creating additional overhead of annotating every element. This plugin does exactly that - helping quickly scan and annotate alt texts, focus order, landmarks, heading order and everything else.

  6. Eightshapes Specs
    A lot of it has been automated by Figma auto-layout today, but working with a distributed team (I work with an engineering team based in Ukraine) can sometimes have communication gaps, esp during the handoff process - sometimes there are things that are not annotated and the devs ignore it unless explicitly mentioned. This plugin automates annotations for specs, variables, tokens, components etc.

  7. component.gallery
    A one-stop shop for component documentation, usage, specs, and everything in between, searchable by individual components across all public design systems.

This is by no means an exhaustive list, instead resources that I have found myself using more than once in my day-to-day, hope they help you too!

© Ayush Sharma, 2024. Font set in Wix Madefor, icons from Phosphoricons

© Ayush Sharma, 2024. Font set in Wix Madefor, icons from Phosphoricons

© Ayush Sharma, 2024. Font set in Wix Madefor, icons from Phosphoricons