Kim Maida

Web Design & Development

Web Design & Development

I am a designer and full-stack engineer with a love for clean design and good semantics. I offer services in comp design and full-stack website and application development.

I also create and share resources for other designers and engineers, including graphics, tutorials, open source code, and themes. These resources can be found at my blog and GitHub.

GetWellthy™

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
SocialWellth
When:
November 2013
Role:
Front-end Application Development
How:
HTML5/CSS3, Angular JS, JavaScript/jQuery

The GetWellthy™ program works in conjunction with affiliates like health insurance companies to reward users for being proactive about their health. The web application was built on the Angular JS framework with a RESTful API. It is fully responsive and optimized for mobile devices. Progressive enhancement provides the ability to include dynamic animations on browsers supporting modern CSS3 specifications. Programming was completed using JavaScript, Angular, and jQuery.

Presbyterian Healthcare Services

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Presbyterian Healthcare Services
When:
August 2013
Role:
Front-end Development
How:
HTML5/CSS, JavaScript/jQuery, SharePoint
Visit:
http://phs.org

Presbyterian Healthcare Services is a major healthcare system based in New Mexico. They have eight hospitals, dozens of clinics across the state, and also provide health insurance plans. They wanted a bold new site to house a wealth of information, resources, and tools for New Mexicans. The site collection includes the main PHS.org website as well as sites for Job Seekers, Providers, and Employers & Producers in addition to each of the eight hospitals. An internal tool for PHS members called MyPres was also built to help users manage their insurance and health records. The network of sites was built as a public-facing, content-managed Microsoft Sharepoint installation based on the client's familiarity with Sharepoint as an intranet.

Sequor Sales Tracker

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Sequor Sales Tracker
When:
March 2013
Role:
Full-stack Application Development
How:
HTML5/CSS, JavaScript/jQuery, PHP/CodeIgniter

Sequor Sales Tracker is a web application with user authentication for tracking sales and customer information. It was designed Mobile First and is fully responsive and optimized for touch with the intention that it be used on smartphones and other mobile devices on the sales floor or on the go. It is customizable to suit the business needs of small companies, the target consumer. It was originally developed for Fast Lane Powersports but is portable to any small business.

Internet2

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Internet2
When:
January 2013
Role:
Front-end Development
How:
HTML5/CSS, JavaScript/jQuery, Responsive Design

A set of three fully responsive templates were developed for Internet2 to expand and connect to their Django content management system. All templates were developed with fluid, percentage-based layout (large layout and mobile layout). Templates were optimized for both views, loading items such as homepage theater, dropdowns, etc. on large devices only and saving bandwidth on mobile with the ability to switch between the views seamlessly.

University of Michigan Heritage

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
University of Michigan
When:
January 2013
Role:
Front-end Development
How:
HTML5/CSS, PHP, JavaScript/jQuery
Visit:
http://heritage.umich.edu

The University of Michigan celebrates their bicentennial in 2017. To commemorate this event, they wished to showcase an interactive timeline-based site to feature some of the rich histories of the university. The site features an animated, parallax timeline with entry points into stories spanning the university's history. Each story is told in chapters with text and imagery. Stories also feature media galleries.

Bioré® See the Change

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Bioré® Skincare
When:
August 2012
Role:
Development
How:
Adobe Photoshop, XHTML/CSS, jQuery, C#, Facebook
Visit:
(charity drive completed, contest page no longer publicly available)

Bioré® Skincare worked with Change For Change and funded a contest to donate money to two charities. Users were able to vote once per day for a month for one of two charities (Petfinder Foundation and Vital Voices). Users clicked on the coin with their charity of choice's logo to cast their vote and the coin would then animate and drop into the jar. As the contest went on, the jars of coins representing each charity showed an animation of filling to a level representing the contest progression. Upon voting, the user would be able to see a modal telling them what the current tallies were for each charity and how many days remained in the contest.

John Frieda® Destination Blonde on Facebook

Hover to zoom, click to view Click to view
Who:
John Frieda® Haircare
When:
July 2012
Role:
Development
How:
Adobe Photoshop, XHTML/CSS, jQuery, C#, Facebook
Visit:
JohnFriedaUS on Facebook

John Frieda® Haircare has a well-established presence on Facebook and does regular seasonal refreshes of their site content. Destination Blonde is one of their prominent shades with its own dedicated section both on the main website and Facebook. The July 2012 Facebook page features called-out products, tabs with videos (powered by a custom-built jQuery video plugin) on styles and tips, and a poll that users can vote on.

Harley-Davidson Parts Tracker Application

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Brighton Harley-Davidson
When:
June 2012
Role:
Full-stack Application Development
How:
Adobe Photoshop, PHP/MySQL, HTML5/CSS, JavaScript/jQuery

The Brighton Harley-Davidson motorcycle dealership wanted a method to track motorcycle sales. They needed a way for the Sales and Parts departments to communicate the status of purchases and associated labor as well as to track dates for follow-up correspondence with customers. I designed and developed a CRUD (Create, Read, Update, Delete) database-driven web application using PHP, MySQL, and JavaScript to meet these needs. A login system was also implemented for administration.

Michigan State University Extension

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Michigan State University Extension
When:
February 2012
Role:
Wireframing / Prototyping + Design + Front-end Development
How:
Adobe Fireworks, XHTML/CSS, jQuery, Expression Engine CMS
Visit:
http://msue.msu.edu

MSU Extension was badly in need of a fresh, updated, more public-facing website to replace their internal portal and temporary, transitional site. They generate a large amount of news and events and needed a fast, accessible way to get this content to their audience of Michigan residents, farmers, educators, and politicians.

Nicholas Baxter's Fine Arts Portfolio

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Nick Baxter
When:
January 2012
Role:
Design + Front-end Development + WordPress Theme / Programming
How:
Adobe Photoshop, HTML5/CSS, jQuery, PHP, WordPress as a CMS
Visit:
http://www.nbaxter.com

Extraordinary sharp-focus realism oil painter and world-renowned tattoo artist Nick Baxter needed a clean, minimalist-style fine arts portfolio (and blog) to showcase his work to galleries, contemporaries, and fans.

Michigan Farm & Food Safety

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Michigan Department of Agriculture
When:
November 2011
Role:
Design + Front-end Development
How:
Adobe Fireworks, XHTML/CSS, Expression Engine CMS
Visit:
http://mifarmfoodsafety.org

The Michigan Department of Agriculture's Michigan Farm & Food Safety is a certification plan for farms to enhance food safety and management practices and minimize harvest risk for contamination and food-borne illness. The logo was provided to me and I designed a friendly, fresh website to host their training resources, news, events, and other pertinent information.

Michigan Agriculture Environmental Assurance Program

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Michigan Farm Bureau
When:
November 2011
Role:
Design + Front-end Development
How:
Adobe Fireworks, XHTML/CSS, jQuery, Expression Engine CMS
Visit:
http://www.maeap.org

The Michigan Farm Bureau's MAEAP program is a certification program available to farms desiring to voluntarily prevent or minimize agricultural pollution risks. They came with an existing logo and signage and wanted to maintain the color scheme / theme of their previous website (sky and/or landscape motif, green and blue) in their new, updated design. The website needed to showcase videos and galleries as well as provide a large amount of information to interested parties.

Kim Maida's Portfolio

Hover to zoom, click to view, ‹ › to navigate Click to view, ‹ › to navigate
Who:
Myself
When:
2009 - 2013
Role:
Design + Front-end Development
How:
Adobe Photoshop, XHTML/HTML5/CSS, jQuery, PHP
Visit:
v5 (retired) | v6 (retired)

My personal portfolio is something of a playground for me. When I learn new techniques or have ideas for a design that isn't suitable for any client projects at the time, I revamp my portfolio to practice and experiment. Here are a few previous iterations of my portfolio. The most recent two (previous to the current) are still available for live viewing, although they have technically been retired.