Website

Get your hackathon to a new level!

If you have reached this point, then you are on the right track!

Building a website for your hackathon is an essential part of both marketing the event and finding the sponsors. Minerva Hackathon is on it is baby stages, so we need to start creating a permanent brand that will be recognized by others in the tech world. Thus, it would have been beneficial to use already existing and recognizable domains from previous years. In the hope that we can use Minerva Hackathon 2019 website, we spent days in wait to just learn that it is no longer in use, and we need to build everything from scratch. Fiasco, my friends! Nevertheless, in every dystopia, there is a light for utopia: you only need to find a way for it. For the guidelines on how to do it, follow our basic real-life experience steps to make your website running in less than a day!

The mini-workshop!

Step 1. Unleash your creative potential!

The website should represent your hackathon. To this point, you should have already decided on your theme for the hackathon. Thus, firstly you should develop a unique and appealing design for the idea. Pro tip: read about #designthinking for iterative work and use materials from that class to ensure that your design serves the purpose you intended. Minervans are great at critique, so share with your classmates your sketches to gather feedback and improve on the lacking aspects of the design.

1. Find some inspiration for your theme on the internet.

Our theme was Utopia vs. Dystopia; thus, we searched for inspiration for this theme and found a picture to base our design off.

2. Create your color pallet.

After finding some inspiration, start creating design prototypes and experimenting with color themes to select the best one for your topic and based on the visceral appeal. Create some aesthetics!

Start with some basic sketches:

Then, using tools such as Adobe Photoshop, create the final versions of the elements of graphics to use in the website design. Gather feedback on the color choices and pick the main color template to use for the theme.

For example, we had a group of students who would give us feedback on the design choices. Based on their feedback we would change the colors or even shapes of the graphics to make them more eye-pleasing and matching our theme. In the end, our final design looked like this:

Now you have graphics to use for your website design!!! [1]

Pro tip: Before setting up your website, it is a good idea to prototype how it will look like using your graphics. This will help you to know how to organize your website and get ready graphics for that specific organization. You can just throw together a sketch:

or use tools such as Photoshop to actually make a prototype:

Step 2. Select the way to create a website!

There are two options for you: to build a website from scratch or use website builders, such as Wix.com or Weblium.com for that.

‌

• Our suggestion is to build a website on your own by using guides from this article. You don't need to be an experienced programmer for that, enthusiasm, and a couple of hours of devotion to the job are all you need to succeed in the website development! Pro tip: Minerva is full of talented students, among whom there would be people who have experience in website building. Reach out to them and ask for help! Involve them in the process or give the full control over. It will give them a new project to add on GitHub and less worry for you about setting up a website as a newbie.

• Contact various web-builder companies and ask if they would like to be sponsors of the hackathon. Negotiate to get access to premium services on their platform and set up a website with ready tools. It is as easy as photoshopping! Just various drag in needed elements, change the visuals to the graphics you created, select a domain name, and your website is ready to go!

Pro tip: Ask your mentor if there are already exiting connections to any of the website building companies. Having a relationship can ease your reach out and be more fruitful. We had a connection point with Weblium; thus, they became one of our sponsors and allowed us to use their services to develop our website. Check the website here!

‌

Step 3. Make sure to include all details pertinent to the hackathons!

The content of your website is essential! You are creating it to attract sponsors and then participants. It should be easy to navigate and include the following elements for your final website version: FAQ, eligibility, requirements, timelines, learning resources, judges, winning criteria, prizes, etc. As more information becomes available to you, populate that to the website: registration, location of the venue, travel reimbursement opportunities, sleeping accommodations, food options, etc.

As an example of content details, look at our FAQ section on the website:

Pro tip: To show credibility and project the success of the your hackathon, showcase photos from previous Minerva Hackathons! You can find photos and videos in this Facebook page.

We genuinely hope that this was insightful for you, and you are already excited about your website development!

HC footnotes:

#designthinking: Throughout the process of creation of the website and graphics for it, we have used iterative deigning approach by firstly determining our theme, getting some external inspiration by research, creating first sketches and iterating through the process until we got to our final version of the graphics used in the website design. Here, we show how we approach this proses ourselves and gave step-by-step guide for M'24s to have an easier time creating design for their hackathon (just look at those pro tips!)