SPACE.EX

SPACE.EX

PresentaTION

SIDHARTH GOPAKUMAR

Color Theory

• Primary Colors
• Cosmic Purple (#6c5ce7)
• Used for: Main accent, interactive elements
• Psychology: Creativity, mystery, innovation
• Example: Navigation hover states, buttons
• Nebula Blue (#00ceff)
• Used for: Secondary actions, highlights
• Psychology: Trust, technology, depth
• Example: Secondary buttons, information highlights

Space Black (#0a0a12)Used for: Background, main text Psychology: Sophistication, elegance, space

Color Properties

Hue:Purple/Blue spectrum for cosmic feelSaturation: High saturation for interactive elements Value: Dark background with bright accents Tints: Lighter versions for hover states Shades: Darker versions for depth Tones: Muted versions for backgrounds

II

TYPOGRAPHY

Type Scale

• H1: 3.5rem (Page titles)
• H2: 2.5rem (Section headers)
• H3: 1.8rem (Subsections)
• Body: 1.1rem (16px base)
• Small Text: 0.9rem (Captions, footers)

Typefaces

• Headings: Space Grotesk (Sans-serif)
• Clean, modern, tech-inspired
• Excellent readability at various sizes
• Body Text: Space Grotesk
• Consistent with headings
• Optimized for screen reading
• Monospace: Space Mono

Kerning & Spacing Letter Spacing Headings: -0.05em (tighter for better readability) Body: 0.02em (slightly increased for clarity) All Caps: 0.1em (navigation items) Line Height: Headings: 1.2 Body: 1.6 Paragraphs: 1.8

BACKGROUND DESIGN AND PSCHOLOGY

BACKGROUND DESIGNColor: Deep Space Black (#0a0a12) Purpose: Creates immersive space experience Effect: Makes content pop, reduces eye strain Implementation: Fixed video background with overlay

Color Psychology Black: Mystery, space, elegance Purple: Creativity, innovation, cosmic Blue: Trust, technology, depth White: Purity, clarity, stars

III

GRAPHIC DESIGN

Balance Symmetrical Balance Header & Navigation Centered Logo: The "SPACE" logo is centrally aligned, creating a focal point Balanced Navigation: Menu items are evenly distributed on both sides Search & Menu Icons: Positioned symmetrically for visual equilibrium

Asymmetrical Balance Planet Cards Varied Sizes: Different planet sizes create visual interest Offset Positioning: Planets are not perfectly aligned, adding dynamism Weight Distribution: Larger planets are balanced by multiple smaller ones

Proximity

Proximity Related Elements Grouped Navigation items Planet information cards Contact form fields

Planet Cards Each card groups: image, title, and description Related information is visually connected Consistent margins between cards (2rem)

ALIGNMENT

Alignment makes sure everything is placed with correct order which is visually pleasing for the users to assess and read

REPETITOn

Repetition Consistent Elements Buttons Same rounded corners (4px border-radius) Consistent padding (0.8rem 2rem) Identical hover effects (color shift + scale) Cards Uniform shadow (var(--shadow-md)) Consistent border-radius (8px) Matching hover animations

CONTRAST

Contrast

• Color Contrast:

Its the difference between the elements in the design

• White text on dark background
• Bright accents on dark space

EMPHASIS

MAKES USERS FOCUS ON THE MAIN OBJECTIVE

EMPHASIS is the importance of element in our design as subscribe is the one eye catching and important in this context

Here Send message is an example of EMPHASIS

SPACE

Space helps with the readability of the content to help user focus

Here enough space has been used to focus on the main heading and to dive in deeper to explore the cosmos

Using space also captures the attention of the users

UNITY

Unity principle refers to how well all the elements used in your design project work together, Having a clear relationship and communicate the same concepts, causing your design looks more organized and every element on it will be related to each other.

HEIRARCHY

It helps people who will see your design understand better what is the important element on it.

Giving extra visual weight to your most important message.

As you can see the CONTACT US is bolded in a way that the users can easily view its importance and then proceed to the following content after this

THANKS!

DONE BY SIDHARTH GOPAKUMAR

Got an idea?

Bring it to life with an interactive window

Create a new layer with all the Genially features.

• Generate experiences with your content.
• It’s got the Wow effect. Very Wow.
• Make sure your audience remembers the message.
• Activate and surprise your audience.

Got an idea?

Use this space to add awesome interactivity. Include text, images, videos, tables, PDFs... even interactive questions! Premium tip: Get information on how your audience interacts with your creation:

• Visit the Analytics settings;
• Activate user tracking;
• Let the communication flow!