Spectrum design examples

Spectrum

Onboarding screen where a new user is welcomed and guided through finding communities, sharing with friends, and building their own community.

• Welcome
• Browse

Spectrum

Community feed where the user views recent discussion threads across various channels like General, Support, and Feature Requests.

• Social Feed
• Browse

Spectrum

Detail page where the user reads a community discussion thread about Dribbble invites and can reply using the bottom composer.

• Comments
• Messages

Spectrum

Home feed where the user views recent community threads, starts a new conversation, and accesses their joined communities.

• Social Feed
• Browse

Spectrum

Home feed where the user can start a new thread, view recent posts from communities like Spectrum, and check their notifications via an open popover.

• Notifications
• Empty State

Spectrum

Community feed page for Product Design where the user can browse channel discussions and is prompted to join the group.

• Social Feed
• Browse

Spectrum

User profile page displaying the user's community memberships in a left sidebar and a chronological feed of their recent forum posts in the main area.

• Profile
• Social Feed

Spectrum

Inbox page where the user views their notifications, currently showing an empty state with a prompt to return to the home screen.

• Empty State
• Notifications

Spectrum

Modal where the user creates a new community by setting a name, custom URL slug, description, and optional website.

• Media Editor

Spectrum

Messaging inbox where the user is searching for a recipient by typing their name to start a new conversation.

• Messages
• Search

Spectrum

Explore page where the user discovers featured, popular, and recent communities to join.

• Browse
• Tabs