hackerati

The Hackerati

Date: winter 2014
Categories: visual design, UI/UX design, interaction design, front-end web development
Tools used: Adobe Illustrator, Adobe Photoshop, HTML, CSS, JavaScript, jQuery, Jekyll

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

In early 2014, I designed the brochure website for The Hackerati, a software development firm. They wanted to express their unconventionality and demonstrate that they were the opposite of corporate. In order to do that, I peppered their website with illustrations and graphics, my specialty.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

I made the gears on their intro page move using CSS3 transforms to illustrate a sense of progress and innovation.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

I used the Google Maps API to create and customize the look and feel for an interactive map in their Contact Us section.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

In the Bio section, I made it such that when the employees’ photos were hovered over, they were replaced with a second, goofier-looking photo. Guess which photo the mouse is being hovered over in the above screencap? (Yes, it’s Alex Sheehan.) The Hackerati loved this, because they felt it conveyed their unconventionality in a clever way.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

When the thumbnail portraits were clicked on, a modal would load, containing the employee’s bio, contact information, and social media handles.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

The perks section was my favorite one to design, because of the illustrations. When any of the circles were hovered over, they would disappear to reveal the specific perks under that category.

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software

Ariel Cotton UI UX Design The Hackerati Brochure Website Tech Software



Top