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
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:
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
Similar ideas
6 ideas
How to write great interview feedback
medium.com
5 ideas
Lecture 2 : What is the Design Process?
medium.com
6 ideas
Double Diamond Model: what is it?
justinmind.com
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.
I agree to receive email updates