UI Design Achievements
Weight: 20%
Due:
- For all achievements, submit a viewable link to brightspace.
- Each submission will be marked out of 5
Hi Resolution Card Design
- Emulate a card from a website that you like or from the specs of a design system
- Create a card in figma
- Use a custom color and typography set
- Design on a grid
- Display it in a 3 up desktop layout
- Display a mobile version on a phone layout
Blog Post Mockup
- Create a mockup for a blog post
- Hi resolution (blog text can be lorem ipsum)
- Include at least 1 image
- Content to include:
- Title section
- Blog text
- 1 other section (comments, tags, sidenav…)
Hero Section Mockup
- Create a visually appealing hero section
- Feature 1 to 2 buttons
- A large background image or well placed foreground image
- Headline
- Subheadline
Mobile First Design
- Create any of the above 3 design elements
- Design it in high resolution for mobile first
- Create a minimal wireframe to show how it would translate to desktop
Set up a Design System
- Use one of your moodboards to create a design system
- Include:
- Colors (primary, secondary, black, white)
- Fonts (heading, text, display)
- Desktop and Mobile Default Frames (with columns configured)
- 3 reusable UI component elements
Button with a Hover State
- Design a button
- Set up a functional hover state
Card Hover Call to Action
- You can duplicate either your in class or other achievements for this (but must duplicate and rename)
- Create a hover state for either a CTA button or make the whole card clickable
- Make the CTA take the user to a different frame
- Frame should have minimal content and a functional back button to get back to the card
Navigation Prototype
- Create a navigation bar design
- Full marks for it being positioned in relation to a header or other section of content
- Do one of the following:
- Mobile navigation with slide out or drop down click on hamburger
- Desktop navigation with drop down menus
- Desktop hero navigation