Website DesignAugest 2024

Making digital identity easier to understand

I designed a one-page website introducing the Unique Personal Number (UPN), bringing its purpose, benefits, and key information into one place. Through custom cards, icons, and illustrations, I turned technical information into a visual experience that feels approachable and easy to follow.

UPN Information Website

Color Palette

A calm approach to digital identity

I paired soft blues with snow white and midnight navy to create a calm, approachable feel. The palette keeps the cards, icons, and illustrations consistent across both light and dark themes.

Sky Blue

HEX
#8cc4ff
RGB
140,196,255

Powder Blue

HEX
#c0ddff
RGB
192,221,255

Snow White

HEX
#fbfbfb
RGB
251,251,251

Midnight Navy

HEX
#1c2536
RGB
28,37,54

Home Page

A personal identity, visually expressed

I used a fingerprint as the central visual to represent the uniqueness of each person’s identity. Blue tones and a dotted line connect the sections, giving the page a consistent visual story from the introduction to the number breakdown.

Custom Cards & Icons

Small Details That Explain Big Ideas

I designed each card and icon to communicate UPN’s core benefits: privacy, efficiency, and security. Pairing familiar symbols with short explanations helps visitors scan the information and understand the main ideas at a glance.

Custom illustrations

Bringing the idea to life

I created custom illustrations to explain UPN visually, using fingerprints, icons, and connected elements to make digital identity feel more familiar and easier to understand.

Frequently Asked Questions

Clear Answers In One Place

I organised common questions into a compact accordion, covering what UPN is, how to obtain it, and where to get it. Visitors can open the information they need while keeping the page simple to browse.

Information Design

Breaking Down The Number

To explain the structure of a UPN, I created a visual breakdown that connects each group of digits to its meaning. Colour-coded lines and individual labels turn a long number into smaller, easier-to-understand parts.

Light & Dark Themes

One Identity, Two Appearances

I designed light and dark versions, adapting the backgrounds, cards, and illustrations while keeping the same visual identity. The blue accents and fingerprint imagery carry through both themes for a consistent experience.

Multilingual design

Making UPN feel familiar

I designed the page to support Kurdish alongside English, adapting the layout for right-to-left reading. Consistent visuals connect each version, helping people explore UPN in a language they feel comfortable with.

Mobile Experience

Clear information on every screen

I adapted the layout, cards, and illustrations for smaller screens, keeping the information easy to read and follow while preserving the page’s visual identity.

Design Reflection

Bringing Clarity Through Visual Design

This project brought together information design and custom visuals within a single page. Every card, icon, and connecting line was designed to help explain UPN and make an unfamiliar concept feel more understandable.