UX
      Back to home
      1. Help Center
      2. Projects, Process & Support
      3. UX

      H&D | UX Pattern

      Common UX patterns and notes about our process for wireframing & design. This is a living document and will be updated periodically by the UX person.

      1. Set up document & artboard

      • Common container size for website/ web-app: 1280px with 40px padding on both sides.
        Please note size can be vary depending on the project, it's a good practice to check first with the developer team if a custom size required.
      • H&D uses 8 point grid system that applies multiple of 8 (8, 16, 24, 32, 40, 48, 56, etc.) to layout, dimensions, padding, and margin of elements. Please note that it can be mixed with 4pt grid system where suitable.
      • Include Footer note panel underneath every page which includes:
        • Link to Wrike task
        • Link to brief/document (Optional)
        • Extra notes for the pages (Optional)
      • Example of how the panel looks like: LLC | Portals | Event Management

      2. Manage versions

      To keep the sharing link to a project remain the same at all times, use ONE page as an official page with a clear name & notes. E.g {Project} | Wireframe | Prototype

      The recommended process to work on iteration:

      1. Duplicate the original page and give it a version name (e.g., v1.0).
      2. Make changes on the duplicated page.
      3. Once the changes are done, copy them back to the original page.
      4. Use the "Paste and Replace" function to quickly update the new version.
      By following this process, all comments will be also stored on one page instead of being scattered everywhere.

      3. Placeholder content

      • Use the indication text in the wireframe where possible rather than use dummy content (i.e Lorem Ipsum) E.g This is the headline; This is a short blurb section...
      • Use Figma's plugin to fill the content with fake information but in the correct type & format. E.g First & Last names, Phone number or email...;
        Plug-in suggestion: 'Content reel'

      • References should always be in the region of the client to make it feel as real as possible, i.e. if AU use AU phone numbers and locations
      • If showing a flow, use one contact detail everywhere so it is easier for the customer (and our team) to track the different data points.
      • Use the overlay text on elements where suitable to indicate file types (images/video/icon).
      • Preferable date format: dd/month/yyyy

      4. Form

      • Use Label & form field without placeholder text.
      • Avoid placeholders as a label.
      • Make action buttons task-specific, and avoid generic terms E.g Signup; Check out, Pay better than Submit. 

      5. Typography

      • Use system/default font for wireframe. Brand/custom fonts will only be updated in the hi-fi/design version. (H&D's default font is Poppin).
      • The case for headings and form fields - use the sensible title case, i.e. don't capitalism join words such as on, it, is, and - E.g. First Name
      • Use each text per layer to easily manage spacing and order by Auto layout.

      6. Navigation

      • Breadcrumb: Follow this structure
        • Home >  Section 1 > Page
        • Where Home and Section 1 are underlined & link to previous pages