Portfolio

New Portfolio

What:

Click here to go to the work in progress.

I am in the middle of revamping CurtisMann.org. You can view the work in progress by clicking the above link. The goal is to create a responsive layout featuring columns with items of varying height—a "masonry style" grid. I am quite happy with the direction the project is headed in.

How:

Wireframes for both mobile and desktop were created in Illustrator. More detailed mockups for mobile and desktop followed shortly. This tutorial (and some of the comments) by Andy Barefoot proved immensely useful. I used the following tools:

  • HTML
  • CSS: animations and grid
  • JavaScript: vanilla DOM manipulation
  • Illustrator and Photoshop for GIFs

Splash Page

What:

Click here to go to the splash page.

I designed an early version of the landing/splash page for my redesigned homepage. The current state is a single responsive page with HTML Canvas graphics.

New Splash Page

How:

A quick mockup was made in Illustrator, this can be seen here. Other tools used include:

  • HTML & Canvas
  • JavaScript: generative graphics and DOM manipulation
  • CSS: resonsive type and layout

Lame Fonts

What:

Click here to go to Lame Fonts.

Lame Fonts is a showcase for the web's most undesirable typefaces. The single-serving web page is built upon the Google Fonts API. The page fetches two directories of all available typefaces—one is sorted by popularity and the other is sorted by trendiness. The 4 least popular and 4 least trendy types are presented. From sketches on paper to wireframes and mockups, the end result is a mobile-first, responsive web page with dynamic content.

Lame Fonts

How:

Wireframes and mockups were created following a short period of sketching. These documents can be seen below.

I used the following tools and technologies for this project.

  • Google Fonts API
  • HTML
  • CSS: media queries, columns, responive type, responsive layout
  • JavaScript: recieve and parse JSON object, basic DOM manipulation
  • Adobe Illustrator

Styling:

Other than the dynamically generated lame fonts, I use Source Sans Pro: 300, 300 italic, 600, and 900

I used using the following color palette:

  • #FFAC08
  • #7A7A7A
  • #34AFC4
  • #FFFFFF

Hot Laps

What:

Click here to view the final product.

The purpose of this design project was to create wireframes, mockups, and prototypes—all leading to a final responsive webpage that displays information in an infographic-esque fashion. The design process is documented below.

Following a 14 week period of training, I began designing a way to present the small amount of running data I had amassed. Like many runners, I keep a daily log and write down every run's distance as well as intervals, tempos, drills, and weights. The data from this notebook will be used to create a fully responsive web page that presents information in an intriguing and easy to read fashion.

Hot Laps

How:

I used the following tools and technologies for this project.

  • HTML
  • CSS: flexbox, media queries, columns, responive type and layout
  • JavaScript: basic DOM manipulation for responsiveness
  • Adobe Illustrator

Styling:

For the final product I used using the following color palette:

  • #F2F2F2
  • #F45342
  • #EA2D2D
  • #4392F1
  • #98C7FF
  • #4C4C4C

The graphs feature a CSS gradient between the two shades of red or the two shades of blue.

I used the following typefaces for the final product (all available from Google Fonts):

Wireframes and Mockups:

With pen and paper, I began jotting down preliminary sketches. I took note of what kind of data I had and considered different ways to present it. Next, I moved into Illustrator and created two very rough wireframes. At this point I began to get a sense of the general layout and what type of design patterns and charts that I might use moving forward. You can view the full desktop wireframe here or you can view the full mobile wireframe here.

With a better understanding of the specifications and requirements, I began mocking up both a desktop and mobile view. With many design decisions still to be made, I was not too concerned with being pixel perfect, or even close to pixel perfect. I chose the typefaces, type scale, and color pallete—all subject to change—that would style this project. A mobile-first approach resulted in a minimal and straightforward page. I did not mockup the entirity of the page—I stopped once I had a firm grasp on the varying HTML elements and classes that would be required, my "kitchen sink". You can view the full desktop mockup here or you can view the full mobile mockup here.

Prototype:

Click here to view the first prototype.

The intial prototype was created using HTML, CSS, and a touch of JavaScript. I had not yet finished combing through my training log, all of the data was not yet available to me. I had created a simple and responsive single-serving page that that served as the basis for further refinement. Only one of the handful of graphs was created for this prototype. While I investigated using external libraries for graphing, ultimately I basic web tools: vanilla JavaScript, CSS, and HTML. While certainly not a gorgeous page, seeing it in action across multiple devices proved very useful moving forward.

For the prototype I used using the following color palette:

  • #E2E6E4
  • #C1292E
  • #4392F1
  • #4C4C4C

I used the following typefaces for the prototype (all available from Google Fonts):

Revised Mockups:

Unsatisfied with the appearence of the initial prototype, I decided to create a second round of mockups. Evolutions of the initial prototype, these mockups feature a change in type, color, and layout. You can view the new desktop mockup here or the new mobile mockup here.

Results:

Click here to view the final product.

This proved to be a great exercise in all aspects of the design process.

Design Challenge: Flow

What:

I was given a design challenge as part of the interviewing process. The prompt was simple: create a 3 step flow that allows mobile users to request a brochure from our website. The end result is the integration of a new button and input form based around the company's existing styling and branding. I have redacted revealing information for the sake of the business' anonymity.

How:

I chose to use the screen dimensions of the iPhone 6s (1334px × 750px) and Mercury's free iOS 9.3 UI Kit. Using Illustrator in conjunction with information made available via Chrome's developer tools I was able to quickly create vectorized mobile views.

Render of new home screen view

My first idea was to have the newly added "Request a Brochure" button toggle a sliding reveal of a hidden form element. However, this might lead to confusion with the existing "Request a Demo" form on the bottom. Instead I decided to create a new form akin to the sign up page. To create a shipping info form I mimicked the fields/style of the existing sign up form and made changes where necessary. Initially I placed the "Request a Brochure" button in between the demo and trial buttons. The final change I made was relocating the new button to the top of the three button stack. Requesting a demo and starting a trial seem to go hand in hand and should remain adjacent to each other. Requesting a brochure isn't as committal/scary as requesting a demo and should stand apart.

Results:

You may view the final project by clicking this link. This challenge took one evening to complete.

Wheel of Misfortune

What:

The Wheel of Misfortune is an experiment in intentionally terrible user interface. Billed as "Alternative Form Entry", Wheel of Misfortune removes the keyboard from the equation of online data input. Users must rely on chance instead of keystrokes. Inspired by Wheel of Fortune, users spin a digital wheel. Instead of money and vacations, the wheel lands on characters. The lucky character is placed into the form field of choice.

How:

This project is being implemented using the following:

  • CSS3 animations
  • Vanilla JavaScript DOM manipulation
  • Adobe Illustrator
  • (Pending)PHP and AJAX form submission for payment via Braintree

Results:

This project is still in the works. I have become an approved Braintree business. I intend to integrate payment with them via AJAX and PHP so users can purchase vowels for a small price.

Blog

What:

I need/want to implement a simple blog web app on www.CurtisMann.org. I am currently in the early stages of development. This includes brainstorming, wireframing, and mockups. At the moment I intend to implement the ability to tag blog entries by subject-matter accompanied by a browse by category form. This is an excellent opportunity to learn a web framework. I am leaning towards React, yet I'm still undecided.

Wireframes:

Below you can see early wireframes created in Illustrator. These will soon become more detailed mockups as design decisions are finalized.

Desktop layout with non-expanded post

Desktop layout with expanded post

Mobile layout with non-expanded post

Under Construction

Background:

Recently I attended a presentation on esoteric programming languages hosted by Pioneer Works as a part of their Software for Artists Day. Daniel Temkin discussed the iconic esolangs Brainfuck and Malbolge alongside the more contemporary languages Whitespace and Folders. When encountering a new language you typically ask, "How can I effectively utilize this new tool?" Esolangs do not lead to questions of utility or practicality, instead they raise the question, "What is a programming language?"

We have become accustomed to trusting technology to accurately store and recall vast amounts of data. Temkin created Entropy with the intention of dissolving this expectation by making information volatile.

"Entropy is a programming language about giving up control. All data decays as the program runs: each value alters slightly every time it's used, becoming less precise…The programmer has, at best, a short window to get his/her idea across before the program corrodes."

— Daniel Temkin

Thankfully, Andrew Wang-Hoyer ported Entropy over to JavaScript.

What:

The next morning I downloaded Entropy.JS and started brainstorming. Previously www.CurtisMann.org featured a red background and a CSS3 animation of a forklift entering the screen and lowering the words "www.CurtisMann.org is currently under construction. I apologize for the inconvenience." Since my site is officially up and running, there is no longer a need for an under construction page. However, I took the time to revamp and reinvigorate the infamous animation. You can see the new page here at www.CurtisMann.org/underconstruction.

New and unnecessary under construction page

How:

This new page was implemented using the following:

Similar to the previous under construction page, CSS animations are used to translate three Illustrator-made graphics across the page. Unlike the previous under construction page, I used the appropriate vendor prefixes for the animations in hopes of maximizing browser compatibility. The canvas element consists of a 30×30 grid. At the beginning of the animation there are 900 squares evenly distributed on the page. Entropy.JS is used to monitor and mutate the coordinates, height, width, and color values of each square object. These values are subject to change frame-by-frame.

Results:

While very satisfied with the canvas animation, I am not yet 100% satisfied with the outcome of project as a whole. There is still one glaring problem, the CSS animations do not work reliably on mobile. I am looking into this yet I remain unsure of the cause.

I would also like to discuss a "feature" in the animation. As you watch the squares wiggle, dance, and change color, you will notice that eventually they gravitate towards one color. Entropy.JS is not a complete implementation and is not equipped to handle hex color values. These color codes are simply treated as all other strings. While all squares start off as the legal color #2b2b2b they may be soon mutate into #2g5w32 or even @@@.//4. I believe the trend towards all square objects becoming the same color has something to do with this, but I'm not quite sure.

CurtisMann.org

What:

www.CurtisMann.org is my current homepage and sandbox for testing and showcasing web and multimedia technologies.

My personal logo

How:

I used the following tools and technologies to create www.CurtisMann.org:

  • HTML
  • CSS + SCSS
  • JavaScript + jQuery + Slick carousel
  • Adobe Illustrator
  • Responsive design using SVGs and media queries
  • Typographic scale using 1:1.5 ratio
  • AJAX form submission to PHP mail script using PHPMailer library
  • Integration of reCAPTCHA v2

Color:

I use the following color palette:

  • #2b2b2b
  • #ff7c7c
  • #f7ab47
  • #eff5ff
  • #f0f76a
  • #487abd
  • #555555

Type:

I used the following fonts (all available from Google Fonts):

Logo:

My logo is based on the Monoton typeface. There are a few variations — the first is shown above — under the "How:" heading and also in the top left corner of this page. The color is #2b2b2b. Another can be seen as the favicon for this page. Two more are shown below. The first of these is the elongated, stylized C with a gradient at at an angle of -45° from #ff7c7c (stop 33.33%) to #f7ab47 (stop 100%). The other is the less stylized rendition in #2b2b2b.

Stylized C logo with gradient

Filled C logo in #2b2b2b

Running Shirts

What:

I have been attending track meets and road races since I was 12 years old. Occasionally there is a shirt given to all competitors. More than occasionally they are ugly. This is a humorous attempt by me to create fictional races and their accompanying shirts.

How:

I built the shirts' designs around existing brand logos. I scoured the web for SVGs and accompanied them with type and other decoration.

Results:

Every runner that I have shown these to has requested one. With the help of my friend Ivana Saginova I have screen printed a handful of the Costco shirts.

Virginia Slims Marathon

Marlboro Distance Night

Michelob Ultra 50k Trail Race

Dr Pepper Road Mile Summer Series 2018

Caterpillar Diesel Power Marathon

2018 Costco Invitational Beer Mile

Ferrari Sprint Festival

Swiffer (and Sprite) Track Classic

BugCo.net

What:

www.BugCo.net is one of my early branding and design exercises. The product of a joke between me and a friend, Bug Co. is a fictitious business that delivers malicious insects to your home or place of work. Complete with a social media presence, Bug Co. aims to conquer the insect logistics industry.

Bug Co. logo

How:

I purchased the domain www.BugCo.net and currently host it alongside www.CurtisMann.org. For the creation of this brand's image and website I used the following:

  • HTML
  • CSS and CSS animations
  • Adobe Illustrator
  • Adobe Photoshop
  • JavaScript + jQuery + Slick carousel

Animations play a central role in Bug Co. Illustrator, Photoshop, CSS, and JavaScript are used to make these. Animations featuring simple transformations (rotations and translations) were realized with multiple PNGs (some static and some moving). More complex animations were rendered frame by frame in Illustrator and stitched together in Photoshop. The home page of Bug Co. features a carousel showcasing comical blurbs from large news organizations. This slideshow uses Ken Wheeler's Slick library.

Results:

A massive learning experience, the creation of Bug Co. gave me a crash course in the basics of web technology and design. While responsiveness and cross-browser compatibility was considered, the site is not perfect. Some animations may not function properly or appear to stutter on mobile browsers. I simply ran into the limits of my beginner's knowledge of web technology. Revamping Bug Co. is on my long to-do list.

Teensy Candle

What:

A microcontroller based device inspired by Moritz Waldemeyer's My New Flame designed for Ingo Maurer.

How:

Impressed by Waldemeyer's light sculpture, but put-off by the price, I set out to create a similar device on a much tighter budget. Below are the materials used:

Unlike Ingo Maurer's piece, this would not be a video-based rendering of a flame. Instead I planned to control a one-dimensional array of LEDs. The flame can travel up and down but not side to side. The 24 lights were set up in an 8×3 grid. Each row of 3 LEDs would be controlled by a PWM out. See the Teensy Pinout for more information. Assembling the circuit took around an hour. See below image:

Assembled Teensy circuit

The code was hacked together in about an hour and to my surprise it functions exactly how I had envisioned. A heinous and confusing series of conditionals, the heart of the code is assigning PWM outputs based both on the current state of PWM outs and randomly generated numbers. Here is the GitHub repository.

Results:

See for yourself. I even made one for my nieces as a Christmas gift. Sidney took it to show and tell. I have toyed with the idea of using a multiplexer to control a two dimensional array that more closely mimics My New Flame.

Video of final product

Soda Emporium

What:

Soda Emporium was the first web page I created. Based on a ficticous soda manufacturer, Soda Emporium is a single-page, non-responsive website showcasing three of the world's finest beverage concepts.

Salmon Beverage

How:

Rudimentary HTML and CSS are used to style the page. Three short GIFs were created using Photoshop.

Results:

I began to grasp the basics of HTML and CSS while improving my animation and design skills. Maybe some day there will be a cleaner, responsive, and multi-page Soda Emporium.

NLP

What:

The goal of this project was to attempt to create a program that identifies the region of origin for a given folklore tale. This served as my final project for Natural Language Processing at NYU. It was not wildly successful, however, this remains my favorite school project. Below I will briefly discuss the tools used. You can view the GitHub repository and the original README here.

How:

I used the following tools and resources:

For a more detailed description see the repository.

Results:

My professor and I agreed that it was too ambitious of a project before it was anywhere near completion. With that said, he encourage me to give it a try and said, "If you pull this off, you'll have folklorists emailing you non-stop". I did not "pull it off", but I showed correct usage of many of the tools we learned to use in that class. I recieved an A for the project and semester.

Quick links:
Contact me: