The ‘Design Review’ Between Designers and Developers - Deepstash
The ‘Design Review’ Between Designers and Developers

The ‘Design Review’ Between Designers and Developers

4 IDEAS

83 reads

The ‘Design Review’ Between Designers and Developers

Keep reading for FREE

One of the most important times for a design review is at the end of a development sprint. A design review evaluates whether or not the developed product is in line with the original creative vision and user experience. In other words, it’s a review of the developed project which helps to verify all graphic and technical components display and function properly.

As the design gets passed from design teams to product owners and development teams, they each make changes due to temporal or business issues, which can mean the final product doesn't correspond with the design team’s vision.

6

39 reads

Here are some (non-exhaustive) elements to check in order to ensure the graphics and ergonomic quality of the developed project:

Alignments:

  • Text Block alignments, images, buttons, logos or icons
  • Margins: margins, padding, optical alignments
  • Spaces: titles linked to paragraphs, numbered lists

Typography:

  • Have the right fonts been used?
  • Are the fonts used royalty free? Are they regulated? There are specific rules with green numbers, and Maestro or Visa credit card details.
  • The typographic hierarchy: H1, H2, H3, italic, labels, etc

6

20 reads

Media:

  • Check the pictures used. Are they royalty free? If not, did you think about crediting the authors?
  • Check the size of illustrations, hero banners and icons in the case of a responsive display (breakpoints between desktop, tablet, and mobile)
  • Observe scrolling images of carousels
  • Check video playback (pictures and sound) for any bugs when displaying JSON files created with the Lottie plugin
  • Check micro-interactions and transitions between pages

Responsiveness:

  • For websites, test across several browsers (Chrome, Safari, Firefox, Opera, Internet Explorer etc.) to detect display differences.

6

11 reads

Colors:

  • Respecting primary colors and accents
  • Background colors, illustrations, text, buttons, icons, card shadows, etc
  • Different interface states e.g. a “night” mode

Affordance:

  • Component states (buttons, links, icons, checkboxes, etc.) like “normal,” “hover,” “pressed” and“disabled”
  • Micro-interactions in navigation menus or tab bars
  • Have proper links been added?
  • How do different states of form fields appear? (Normal, errors, mandatory, dropdowns, focused, typing, disabled)
  • Should open dropdown menus have a specific appearance?
  • Do form fields have the correct size on each device?

6

13 reads

4

It's time to
Read like a Pro.

Jump-start your

reading habits

, gather your

knowledge

,

remember what you read

and stay ahead of the crowd!

Save time with daily digests

No ads, all content is free

Save ideas & add your own

Get access to the mobile app

2M+ Installs

4.7 App Rating