• US$140

• 20 designs

• 2 designers

---

Web Design Brief

ZiggyAstroDust Home Page and Visual Style Specification

I've already gota home page, but I'm not totally happy with it. I've included a mockup of what i have so you have a starting point. I don't thing the logo looks good in the header - the colors seems off. I like the gradient background - just wondering if you can come up with a better design overall.

1. Project goal
Capture email leads, promote ZiggyAstroDust products and courses, and reinforce Ziggy brand vibe that is playful and trustworthy.

2. Brand assets provided
* Logo text graphic ZiggyAstroDustLogo.png
* Planet emblem artwork ZiggyAstroDustHighResIconPic.jpg
Minor tweaks to the logo are allowed if they improve clarity at small sizes.

3. Core color palette
* Hot pink #FF2D95
* Vivid purple #9E38FF
* Electric blue #00A3FF
* Cosmic gold #EADFA3
Background uses a diagonal gradient from hot pink at top left through vivid purple in the center to electric blue at bottom right.
Apply a subtle white overlay at ten percent opacity across the gradient for text readability.

4. Typography
* Headings Google Audiowide, letter spacing two percent, bold weight
* Body Roboto regular, line height one point six
* Fallback stack "Audiowide", "Roboto", Arial, sans serif

5. Layout and spacing
* Content width on desktop maximum twelve hundred pixels, centered
* Base spacing unit eight pixels, scaled by multiples for harmony
* Twelve column grid on desktop, four column grid on tablet, single column flow on mobile

6. Navigation bar
* Logo centered in the bar
* Left links Courses, My Charts, ZaddyChat
* Right links About, Contact, Blog
* Far right button LOGIN styled as primary action
* Navigation bar remains visible while scrolling

7. Hero section
* Full viewport height on desktop, seventy percent viewport height on mobile
* Left half shows planet emblem artwork with soft glow
* Right half contains headline in Audiowide, subhead in Roboto, and email opt in form with single field and Join the Cosmic List button
* Button uses cosmic gold background and hot pink hover glow

8. Section order after hero
1. Products carousel with swipe support on mobile and four cards visible on desktop
2. Featured courses presented in a zigzag layout with course cover images and View course buttons
3. Latest blog posts in a three card grid with thumbnail, title, and read time
4. About Ziggy section with portrait illustration, short origin story paragraph, and Read more link
5. Contact form with name, email, message, and captcha
6. Secondary opt in banner with same form as hero

9. Imagery and iconography
* Use cosmic vibrant stock images with real star fields or stylized nebulae
* Apply outlined icons with slight inner glow that matches the neon palette
* Provide descriptive alt text for all images

10. Accessibility essentials
* Maintain contrast ratio of at least four point five to one between text and background
* Ensure keyboard focus order follows visual flow
* Provide aria labels for navigation, forms, and carousel controls

11. Responsive behavior priorities
* Design mobile first because seventy five percent of traffic is mobile
* Below seven hundred sixty pixels collapse navigation links into a full width drawer activated by a hamburger icon
* Carousel uses swipe gestures on touch devices
* Hero artwork scales down and stacks above text on narrow screens

12. Deliverables
* Layered PSD file with clear group naming for every section, typography styles, and color swatches
* Printable PDF style guide that summarizes palette, fonts, logo usage, and component spacing

---

Files

Download all files - 6.3 MB