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

The ‘Design Review’ Between Designers and Developers

Curated from: uxplanet.org

Ideas, facts & insights covering these topics:

4 ideas

·

176 reads

8

Explore the World's Best Ideas

Join today and uncover 100+ curated journeys from 50+ topics. Unlock access to our mobile app with extensive features.

Quality Assurance needs to be done by Designers not just Software Engineers

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.

9

66 reads

Design QA Checklist on Developer Build (Part 1 of 3)

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

9

46 reads

Design QA Checklist on Developer Build (Part 3 of 3)

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.

9

30 reads

Design QA Checklist on Developer Build (Part 2 of 3)

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?

9

34 reads

IDEAS CURATED BY

natashabee

Experience designer and design teacher interested in well-being, accessibility and great design practices. Specialising in service design, product design and user research.

Natasha Bee's ideas are part of this journey:

Ultimate Guide to Reducing Churn

Learn more about computerscience with this collection

How to analyze churn data and make data-driven decisions

The importance of customer feedback

How to improve customer experience

Related collections

Read & Learn

20x Faster

without
deepstash

with
deepstash

with

deepstash

Personalized microlearning

100+ Learning Journeys

Access to 200,000+ ideas

Access to the mobile app

Unlimited idea saving

Unlimited history

Unlimited listening to ideas

Downloading & offline access

Supercharge your mind with one idea per day

Enter your email and spend 1 minute every day to learn something new.

Email

I agree to receive email updates