This assignment was to create a home page for an autogenerated website demographic (social media site for programmers). Thus IYO was born. As the first project of the class, it included researching sites with similar demographics (Twitter, GitHub, StackOverflow, Snapchat); completing a teardown of an individual site (LinkedIn); and creating a unique logo and vision for our product.

The IYO logo is a play on the pronunciation of I/O and incorporates a binary tree model, to illustrate how the fictional site encourages users to create collaborative, branching projects.

The home page was heavily influenced by the home pages of other networks, focusing on introducing the webpage, hosting relevant links, and encouraging users to create an account, while hinting at additional info for people to scroll through. I chose IBM Plex as the primary typeface (both sans-serif and serif) as a web-friendly font and used a soft gray against black background to be easy on the eyes. Also because my experience with computer programmers is that everything should use night mode. It was created in photoshop.

At the close of the semester, the last assignment was to revisit our first site and recreate it using the information we had learned throughout the semester. IYO 2.0 uses the same IBM Plex type family but switches to monospace to mimic software development environments. This final mockup was created in Adobe XD. The logo is the center of attention, and relevant copy is introduced to establish the purpose of the site. Negative space gives the elements more room to breathe, and the soft green adds a bit of color and illustrates interactive elements/alternative states. It is aligned to a grid and more clearly showcases the purpose of the site without cluttering the home page with unecessary visual elements. It is cleaner, sleeker, and conveys information more directly to users.

A prototype with hover states, etc. is available here through InVision.