Overview
Hack@Brown is Brown University's annual hackathon for high school and college students from around the country. Each year, we have a different playful theme, to encourage students of all backgrounds to participate, which requires a new website and branding.
The theme this year was "Outer Space", so our website and branding is all inspired by this concept.
My Role
As a design lead, I handled art direction, and I worked to delegate team responsibilities, schedule and lead team meetings, and make final design decisions on social media, web design and branding.
Problem
How can we create a culture of inclusivity to encourage even those who never coded before to participate in Hack@Brown?
Solution
The hackathon theme "Space" emphasizes exploration and encourages anyone with a willingness to learn to participate. 3D visuals also immerse the participant in a fun and "hands-on" startup environment.
Brainstorming
In our very first team meeting, I asked everyone to form a list of words that came to mind when thinking of "space":
- planets (animation– rotating planets)
- stars
- UFO
- astronaut (astronaut bear)
- alien (alien bear)
- rocket ships
- sun & moon
- telescope
- satellites
- and much more...
Mood Board
We began by gathering inspiration and creating a mood board of images to solidify our vision and get our ideas flowing:
- The theme should be engaging to anyone who opened the website
- The playful theme helps remove barriers to participation by making the event approachable to beginners and exciting to experienced participants
Color Exploration
Using our moodboard, we picked out common colors which we later refined into our final color palette
Initial Sketching
I began the design process by exploring different visual concepts and layout ideas through sketching. These early sketches helped establish the creative direction and visual elements that would define the Hack@Brown space theme.
Website Layout Exploration
Early wireframe concepts exploring different page layouts and user flow for the hackathon website, focusing on space-themed navigation and content organization.
Illustration Concepts
Initial brainstorming for space-themed illustrations including planets, rockets, and cosmic elements that would bring the theme to life.
Character Development
Sketches exploring the mascot character design, developing the space bear concept that became central to the brand identity.
Final Design
Design Choices
Based on our initial sketches, as a group, we gathered the elements we liked most. We then developed a wireframe mockup in Figma and began developing our 3D assets in Blender.
Style Guide
Taking inspiration from our mood board, we wanted to create a futuristic and vibrant style using a unique font for headings and vibrant accent colors.
3D Assets
As a group, we each worked on developing 3D assets using Blender. Below are some examples of our final assets:
High-fi Prototype
High-fi for desktop:
- We aimed to capture outer space at the top descending down to earth as you scroll to the bottom using a gradient from a dark to a light blue and the earth asset at the footer.
- Animation was used to make the webpage visually eyecatching and unique
High-fi for mobile:
- The mobile version has fewer assets compared to the desktop version in order to reduce business on the smaller screen.
- This makes the screen clearer and more accessible to mobile users, which would likely be a primary use during the hackathon when participants are busy and on the go.
Implementation
After completing the design process, we worked with the development team to turn our design into a functional webpage.
Here is the link to the final website.
Reflections
Key Takeaways
- Leading a team is very different from simply being on a team and requires solid decision making and committment but is very rewarding in the end.
- When working to make a website engaging and accessible for a wide audience, it is important to be creative in design decisions!
- Vibrant colors and simplified 3D illustrations can create an immersive website homepage that appeals to users of all backgrounds and experience levels.