Skip to content

Design spec check #470

@victoriaw2408

Description

@victoriaw2408

We need to go over all the instances on the good dog live site .

Username + Password:

everyone should have admin login with northeastern email + Password1!
also you can log in to mediamakers or musicians with same password + mailto:mediamaker1@example.com or mailto:musician1@example.com or 2, 3, 4, etc.

Docs

Look over how I handled the spec check from last semester

The doc we will be adding our notes is on this Figjam

Keep in mind:

  • The FigJam is split between multiple pages to help better separate information. This will also make it easier to see if one of us (designers) already documented the problem
Image
  • Make sure to have the Figma Dev Handoff page opened while you look at the live site to notice any inconsistencies
  • Try and test as many states as possible, especially error states
  • Look out for spacing, light/dark mode colors, type, borders, components, etc
Image
  • For components screenshot the frame you're referring to and then you can either leave a note next to the frame that the component is wrong or you can follow what I did and side by side the screenshot with the Figma component

Process:

  • when you notice an inconsistency Screenshot it from the page level and paste it under a header with "Live Site" then paste the Figma mock up and add the "Figma mock" label so devs can see the comparison
  • if the page is too long even when zoomed out, just screenshot the full page of what you see
Image
  • for ex. I took screen shots of the landing page and framed them together so that it was easier to see in scale
  • add notes, arrows, etc to point out the differences
Image
  • separate different pages like the photo above since it's easier to track

  • There is a lot of fake data in the live site so a lot of sections are longer and formatted against what we expected.

  • in these cases you can add post its as recs and tag me (Victoria) on Figjam to also read it or you can create a quick mock up of how the data/information would fit better

  • I'd recommend trying to decide on a min/max width/height for these things or tell the devs to add a character/word limit of your choice

Sorry this is so extensive I had to do this for UKG and it helps the other people reading it if the doc is descriptive with photos

Metadata

Metadata

Labels

No labels
No labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions