TAMUhack is a nonprofit organisation that strives to provide an inclusive space for creative expression and to strengthen the hacker community at A&M.
As the Design Director, I design the website interface, graphics, swag, and official documents.
My first year on the job, I wanted to create a design library to help develop a cohesive branding for TAMUhack. We needed a theme for the event that will guide the designs for this year. After going through many discussions with the team, we settled on clouds as a fun spinoff of Cloud technology.
The primary constraints I had to keep in mind were the size of our team and time. Our development team consists of roughly 3 active developers with 3 months before applications opened. I wanted to create a design that was easy to implement and simple to navigate for our hackers. To do so, I helped create prototypes in Figma so they could pull CSS for each asset directly and designed numerous graphics for them to fill space.
One defining feature of TAMUhack for the past four years has been the consistent use of blue and pink as its primary colour scheme. Therefore, to keep a cohesive branding, I kept the overall idea of the blue and pink, but added my own variations to allow more flexibility in all areas of design.
The above primary colours are used in logos and on any printed swag we distribute, such as water bottles and stickers.
Below are the light and dark variations I chose to be used in online graphics, such as social media banners and web graphics.
font-family: AvenirNext, Roboto, sans-serif;
I chose Avenir Next as our primary typeface because it is easy to read and using a single typeface kept development simpler. The different font weights listed below were implemented for emphasis. Paragraph font weight was set to 500, while 700 was used to bold and in titles. 300, although rare, was used in labels and tags.
This project was my first time using Figma. I had experience using Adobe XD, but my team were more familiar with using Figma (and it’s free!) so I picked up a new prototyping tool.
The two tools are pretty similar, although I really enjoy the “Code” tab in Figma that provides CSS styling for some of the components. The live-editing features also made it easy to collaborate with my team and to show them exactly how I designed certain interactions.
Below is the final product based on the prototype.
For this year’s logo, I took last year’s version and simplified it. While many logos are moving away from using text, I simplified our logo to be just text.
We also needed a shorter logo for different purposes, such as the favicon for our website. So for different needs, we can use different sized logos, using colour and font to keep the branding consistent.
As a side project, I began our social media campaign, Hackers@TAMU, on Instagram to really connect the TAMUhack team with our community. Because we want more people to get involved with our workshops and the event itself, I am using this platform to reach out to them.
The concept is simple: we feature a member of our team each week and tell people a few interesting facts or stories about them. We keep doing this rotation until our event, where we can interview people and share their stories, too.
Each year, TAMUhack raises thousands of dollars each year to put together the event and we would not be able to do so without our sponsors. There were not many informed design decisions made in previous years, so I found some similar resources and analysed what they did.
Many hackathons chose a dotted grid to convey different tiers. This style makes it easy to compare tiers and see what is in a particular one. I chose to mimic this grid layout and grouped similar items together to help sponsors identify which packages they wanted the most. I also added an additional page for guidance. While the glossary lengthens the document, we found that it would particularly help companies who are new to sponsoring hackathons.
Being in charge of such a big design effort has really opened my eyes on the different areas of illustration, user interaction, web development, and content writing. The result of my efforts is a vision and style for the future of TAMUhack.
As a designer, there are details I can compromise because as a Computer Science major, I know the limitations of front-end development. I learned that giving and receiving feedback is critical in an iterative design environment. From the environment I dived into, I learned how to make quick and informed decisions based on feedback to create solutions for the thousands of people who look at our site.
With my second year in TAMUhack approaching, I want to take up more responsibilities. This includes helping interview for new developers and designers and hopefully mentor them to host a better TAMUhack each year. I found it is important to work with people who are not afraid to offer or receive feedback, but most importantly, with people you enjoy. This year, the TAMUhack team became part of my family.