The University of Belize was looking to modernize its backlog of school catalogs and needed some fresh ideas. The new materials had to be viable both digitally and through traditional print, so they could be deployed online and in person.

Process

Gathering assets was the initial priority of the project. Text from the old catalogs had to be manually inputted into text documents (fortunately not handled by me, ha) so they could be edited. Images also had to be scanned into digital assets to be used with modern layout programs. My role in this process was to consult to strategize a process to maximize image quality.

Once assets were gathered, it was time for the layout template to be created. The catalog had to be clean and easy to read while adhering to the school's colors without being overwhelming. The type needed to be legible but not completely static to subtly add to the flow and feel of the page.

After several rounds of layout options, the layout was finalized and then sent to a printer to test the final product.

The final was delivered as a PDF to be stored digitally.

Tools

Image editing was handled between Photoshop and Pixelmator. The design and layout of the PDF were handled using Graphic, a vector-based illustration software suite.

Durex was a client of Iris Worldwide and they were looking to roll out a new initiative to advertise some new products they had rolling out. The site was meant to be a one-pager that promoted sexual health with a bit of fun and humor.

Process

While the site itself was pretty simple, it was a priority to make it fun and a bit of an interactive experience to promote people exploring all of the information it was presenting.

After a few discussions with the creative team, it was decided that the site would change its state depending on what information was visible at the time. This required the site to be aware of what points were being read and then change UI accordingly. Durex provided the images and videos and I was responsible for executing the design.

This one was a fun project because we checked in with Durex as development went along to make sure we were on track and they were a lot of fun to work with.

When the site was completed, it was sent to Durex for final approval and then launched.

Tools/Frameworks

This one relied on the good ole web standards of HTML, Common Javascript, and hand-coded CSS. The video was embedded using a custom HTML5 web player.

BMW was looking to bring some attention to their X-6 and M-Series product lines by creating an interactive demo showcasing some of the interesting features of the vehicle. They contracted KBSP (now Forman and Bodenfors) to conceptualize and build two sites to accomplish this. I was retained to assist in executing some key interactive features.

Process

After a few of meetings with BMW to establish project goals, the designs were created to match the experience that they wanted. My part in the process began after the designs were completed and handed off to the development team.

My first task at KBSP was to build the X-6 exploratory interactive site, which highlighted several key features of the vehicle through a test lap concept. The site showed several rooms with an emphasis on specific details, i.e aerodynamic design, brake systems, electronics, etc. The idea was to show several 'researchers' mulling over details and when they were selected, the room they occupied was brought into focus and the information in that section was revealed. The trick was to make sure there were at least 3 scientists in every room and that they didn't overlap. Very fun stuff.

My second task was to build the M-Technology information site to do a deep dive into what made their M-Series vehicles unique. The idea behind this one was to show a rendered version of the car speeding around a track and depending on where one clicked, it would show an exploded animated view of a specific M feature, i.e. body structure, suspension, headlights, etc. This one was a challenge because it consisted of managing a lot of video assets at once so the transitions appeared seamless but it was a blast to work on.

Once these components were built, they were tested and then shown to BMW for final approval.

Tools/Frameworks

The backend was built with PHP to handle data delivery to the front end. An API was built all the frontend to request data from the MySQL datastore and display the results.

The front end was a custom scripted Flash component that handled all video and audio assets.

Featured

Archived

Robert W. Gehl, the Ontario Research Chair of Digital Governance for Social Justice at York University, was looking to freshen up his personal blog. He already had a custom framework that was being used to manage data, so he reached out to me to help him design and develop templates that he could use to plug in and overhaul the look of his site.

Process

The project began with a conversation, so I could get a feel for what he wanted. After the initial discussion, I tasked him with giving me some examples of sites that he liked and to tell me why he liked them.

Once I had better sense of how he wanted his personal style represented, I updated the logo and the color palette that aligned with the particulars shared. I then introduced a new type treatment that fit the new style that made reading his long form content easy and the eyes. A style guide was then created to document all colors, logo variations and type formatting used to bring the site to life.

The last part was building out the templates that would be used as the UI for the site.

Once they were completed, all assets were then turned over.

Tools

Templates were made using heavily commented HTML to guide implementation, with all additional JavaScript and CSS to make it all plug and play. The style guide was provided as a PDF so it could be stored digitally or printed out.

Screens

TOTA (short for Traditions of the ancestors) was a massive effort by a distributed team across several states to build a site that attempts to bring people together by exploring our respective cultures and have those exchanges curated by people from the cultures being discussed.

I was part of a 10 person development team that performed several roles. I was a consultant for my social media experience, I was responsible for conceptualizing and building new features as well as making suggestions/improvements to the existing codebase. As a senior-level dev, I also provided guidance and expertise where it was appropriate.

Process

After the initial onboarding process, my initial tasks were identifying trouble areas in the codebase and providing solutions to stabilize the project as preparation for the implementation of new features.

My primary task was to implement new features, the most prominent being a media manager intended to enable users to keep track of assets uploaded and a discussion board to facilitate conversations between site members.

The process for creating new features began with creating a spec document detailing component-specific functionality and methodology. This document was then discussed by the team to identify trouble spots and further refinement.

Once this was completed, I began the process of building the new components into the code base as well as editing database structures to account for the changes. Once the features were built, they were reviewed and tested by the team to locate any issues so they could be fixed. When the issues were resolved, they were then added to the production codebase and released on the live server.

My secondary task was providing my social management expertise to help shape engagement policy for the platform, with the primary priority being safety for members and creating a methodology for isolating and eliminating bad actors.

Tools/Frameworks

The project stack consisted of NodeJS, with a custom scripted Common JS frontend. MySQL was used as the main data store to house site information i.e. user information, discussions, articles, etc. I implemented Sequelize into the codebase to make interaction with the database easier and less convoluted. Page templating was handled with EJS and CSS pre-processor LESS was used to handle site-wide styling.

Screens

After experiencing the consequences of maintaining an independent social media platform in a largely unregulated space, I saw the need for tools that allowed communities to better curate and project their spaces. So in addition to Fipamo being built to humanize the social web, The Bad Space means to compliment that experience by providing nuanced moderation suite.

Process

The first order of business was figuring out what sources would be used to populate the database. This consisted of using the block lists of other instances that consistently maintained them.

Once this was decided, an interface was built around ingesting and then compiling these lists into a combined directory of locations, detailing what instances have had actions taken against them and why.

These sources are updated periodically to keep the listings up to date.

Tools

The project uses Laravel PHP as the base framework and Postgres as a data store. The UI was built using Blade templating with pure CSS and JavaScript.

Screens

Fipamo began as a personal project because I wanted to consolidate all of the code I had been using to blog into a cohesive package so I could stop duct-taping solutions together. As it came together, I decided to make it an official project and it will serve as the base for a new social media experience. It is open-source and available for anyone to use.

And its core, interactive markdown editor that exports good old HTML, javascript, and CSS that can be hosted anywhere one chooses.

Process

Creating Fipamo was a unique experience because it was born from a need to consolidate code from various projects into a single package. A big part of accomplishing this was identifying the basic features of a blog, i.e. creating/editing/deleting pages, managing assets, publishing, etc, and then finding what pre-existing code I had that accomplished this. If that code wasn't adequate or didn't exist, I created it.

Once basic functionality was in place, a frontend was needed to interact with the system. I mined my previous experience with building UIs and started with a basic wireframe to make sure all necessary pages were accounted for. After that design comps were created to leverage the backend system to be created. The primary goals for the UI were to be simple, clean, and accessible without being boring. The UX needed to be snappy but not overwhelming so users know what is happening in an informative but in a fun way.

Tools/Frameworks

The backend is is built on Rust and SQLite is used to store site data. Page templating is handled by Tera and all pages are built using plain old HTML, CSS and Javascript.

Screens

I could say something super esoteric here to try and be cool, but, honestly, I just like to make stuff.

All the skills, abilities and knowledge I’ve acquired over the years have come from a singular creative drive to try as many ideas as I possibly can.

Skills

• Graphic Design, Creative Direction
• Frontend Design, primarily using Javascript and CSS
• Backend Programming, primarily using PHP, NodeJS and Rust.
• System Administration, primarily using Ubuntu and Debian
• Strategic Consultation and Project Management

Services

• Branding (logos, fliers, book design, style guides, etc)
• Photo Editing
• Full-stack Web Development
• Bare-metal server setup and maintenance
• Self-hosted services (email, social media, cloud computing, etc) setup and maintenance
• Technical Documentation

Ready to work? Contact me here

Among other things, I am also a designer and developer with almost 30 years (I know, right? Me too!) of professional design and development experience, working for clients both big and not so big..

Every so often, I look for fun and cool stuff to work on.

I am currently available.