Nathan Affleck

Team Landing Page

Skills used

  • Typescript
  • SCSS/CSS
  • SvelteKit
  • Web Design
  • Semantic HTML
  • Markdown

Summary

This project required using Penpot (Figma-esque), SvelteKit and UI/UX principles to design and build a team landing page. We used content design, journey mapping, user stories to assist us in our decision making.

What Went Well

  • Established support for markdown for team blog posts and an interface and pages for displaying them.
  • Contributed meaningfully to the Penpot design of the site for use in its later stages.
  • Implemented components into the library

What I Learned

  • Introduced to web design principles and applied these philosophies when making design decisions.
  • Used design system philosophies (Atomic Design) when doing the high-fidelty wireframes for the design phase.
  • Recognised the importance of content mapping, user journey mapping and personas in effective planning.
  • Utilised SvelteKit and its features for the first time to create a performant and scalable codebase/component library.
  • Applied WCAG accessibility best practices using semantic HTML and appropriate colour choices to improve readability and navigation for all users.

What I’d Improve

  • Bring design ideas into code more quickly to avoid over-focusing on minor details.
  • Study common web design patterns as a starting point to speed up ideation.