Website design and development

Client - Newfourth
Timeframe - Fall 2009
My Role - Wordpress site design and development, logo designt

The project - Design and develop a website for a new non-profit organization.

Tools - Wordpress, Photoshop, Illustrator, CSS

Newfourth is a startup non-profit organization in the Salt Lake City area. It's goal is to provide tools for educators to implement journalism education into core subjects. The organization is currently piloting some learning modules and offers some free lesson plans.

Because Newfourth is focused on a modern incarnation of journalism (blogs, wikis, podcasts, etc), a look was desired that bridged old fashioned journalism with the present.  Newfourth promotes journalism as a means for people to participate in the democratic process, therefore a look that evoked democracy on a global scale was also desired.

Tags Wordpress, CMS, Web design

Newfourth Home

Project Artifacts
Newfourth Website
Final Logo Design

Website design, development, and maintenance

Client - Children's Center of San Lorenzo Valley
Timeframe - 2010
My Role - Joomla site design and development and maintenance

The project - Redesign website

Tools - Joomla, Photoshop, Illustrator, CSS

The Children's Center of San Lorenzo Valley is a non-profit childcare center in Ben Lomond, California. Their old website was looking very 1990's and had a number of usability issues that needed to be corrected. In the spirit of children, I designed the new look to be colorful and playful. At the same time, I converted the site to a content management system to allow for ease of updating by their non-technical staff and to allow for future site enhancements.

Tags Joomla, CMS, Web design

CCSLVHome

Project Artifacts
CCSLV Website

Website design and development

Client - Acting for Singers
Timeframe - Spring 2010
My Role - Joomla site design and development

The project - Redesign website

Tools - Joomla, Photoshop, Illustrator, CSS

Shelley Lynn Johnson is a SF Bay Area acting coach who specializes in helping singers prepare for auditions and stage roles. Her previous website was showing it's age and was difficult to keep updated due to some confusing javascript and inconsistencies in page structure. First and foremost, Shelley wanted a site that was easy for her to update. Secondly, she wanted a new look that reflected her personal style. Joomla was chosen for it's ease in editing and ability to display content in a variety of ways without having to use additional templates.

Tags Joomla, CMS, Web design

Acting for Singers Home

Project Artifacts
Acting for Singers Website

Website design, development, and maintenance

Client - Lyric Theatre
Timeframe - Sept 2009 - present
My Role - Web designer and Developer

The Project
Design refresh and move to content management system

Tools
Photoshop, Illustrator, Flash, Joomla

Lyric Theatre is a non-profit community theater in San Jose, CA that performs three fully staged musicals/operettas each season, as well as occasional smaller productions and community outreach. I have been involved in this entirely volunteer based organization for 12 years, in roles including chorus member, backstage crew, producer, board member, marketing director, and for the past 4 years, webmaster/designer.

Lyric needed a design refresh and a structure that could ease the process of updating content. Additionally, they wanted a site that would be easier to expand in terms of functionality like calendar integration (already implemented), photo galleries, and e-commerce. Joomla was chosen as a highly adaptable CMS platform to address these needs.

Tags Joomla, CMS, Web Design, Interaction Design, Visual Design,

Lyric Theatre Homepage

Project Artifacts
Lyric Theatre Website

Website design and development

Client - Empowerment Today
Timeframe - March-April 2009
My Role - Web designer and Developer

The Project
Create a website for a social non-profit startup

Tools
Photoshop, Illustrator, Flash, Dreamweaver, HTML, CSS, PHP

This client came to me with nothing but a logo, and the desire for a clean, professional website that would showcase the work of this up and coming Santa Cruz non-profit. I first met with the client to find out about the site's intended audience, the content areas needed, and the types of images she envisioned would best convey her message. Working from this, I came up with 6 design concepts that complemented the colors of the logo and that featured simple, clear navigation.

The client liked bits and pieces from the different designs, but not one concept overall. So, we did a participatory design session together where I changed colors, layouts, etc. on the fly in Illustrator until we had something that she really liked. The client then provided the content, and I began coding and creating all the graphics.

The photo montage was not included in the original design, but came about because the space with the logo felt empty. I first tried putting the logo next to some other graphics in that space, but then the logo didn't seem a coherent part of the page, but rather an afterthought. I decided to use a photo that encircled the logo as a way of tieing it all together.

Tags Web Design, Interaction Design, Visual Design, Participatory Design, HTML, CSS



Project Artifacts
Website - as delivered to client
Website - current
Design Concept 1
Design Concept 2
Design Concept 3
Design Concept 4
Design Concept 5
Design Concept 6
Final Concept-Home
Final Concept-Interior

Website design, development, and maintenance

Client - Lyric Theatre of San Jose
Timeframe - Fall 2006 - Sept 2009

My Role - Webmaster, designer, developer

The Project
Redesign the website of a non-profit community theatre to make it more appealing, easier to navigate, and easier to buy tickets.

Tools
Photoshop, Illustrator, Flash, Dreamweaver, HTML, CSS, PHP

The previous website for Lyric Theatre was a prime example of usability "don'ts". It was difficult to navigate and had a high degree of inconsistency with regards to site structure and page layout. Plus, it was pale and lacked colorful photos, so was not dynamic from a marketing standpoint. On the maintenance side, the site was difficult to keep up due to its use of tables for layout, non-use of CSS, and links having to be updated individually on each page. I set about creating a site that addressed all of these issues.

First I did an online card-sort exercise with 12 people affiliated with Lyric Theatre to find out the best menu categories, groupings, and wordings. I created a number of sample designs that I presented to the Board of Directors, and they chose one that is similar to what is in place now. The new website is colorful and includes lots of great on-stage photos which are more likely to entice visitors to buy tickets. And since buying tickets is the number one goal of the site, there are several easy to find methods for linking to ticket purchases. Contact information and news updates are also easy to find on the home page, so one doesn't have to dig around to find them.

I switched to a PHP and CSS based site so that colors, styles, and menu items can be edited via single files and applied site-wide. Scripts are also used for filling out forms, and rotating photos with each page refresh. I have designed all of the banners, buttons, and flash slideshows and have tried to capture something of the era and/or feel of the show in the fonts used and colors selected. The look also ties in with the company's printed marketing material.

This website went through a number of design iterations through the years. The HTML/CSS versions have since been replaced by Joomla.

Tags Web Design, Interaction Design, Visual Design, HTML, CSS


Lyric Theatre Home page
Project Artifacts
Design Concept 1
Design Concept 2
Design Concept 3
Show Banners 1
Show Banners 2

littleSigner, an interactive sign language game

Client - Graduate Course Project, Iowa State University
Timeframe - Spring 2008
My Role-research and design (individual project)

The Project
Design an interactive game to teach sign language to babies while making the game adaptable for use by small children with varying degrees of autism.

Method
Researched child development, autism, and games for babies, designed game concept and logo, created storyboards/screenshots, created demo website, etc.

Tools
Photoshop, Illustrator, Flash, Dreamweaver

I took an elective course at Iowa State over the summer called Visual Design for HCI. Though the course deliverables focused on visual appearance, the project of designing a sign language game required me to dive into child development and learning theory while also considering disability/accessibility issues. My research explored subjects including autism, sign language, and developmental milestones of children from birth to two years of age. Though ultimately I came away with the belief that signing is best taught one-to-one and not through the use of technology, this was a fun and challenging project.

Tags Visual Design, Web Design, Instructional Technology



Project Artifacts
Final Logo Design
Final Quilt Design
Final Demo Poster
Final Demo Website
Logo Ideas/Drafts

Website design

Client - Not Just Cheesecakes
Timeframe - Spring 2007
My Role - Designer

The Project
Create design concepts for a cake business

Tools
Photoshop

I noticed that the very cool lady who made my fabulous wedding cake did not have a website. Looking to gain some more design experience and help keep her competitive, I offered to design one. We met several times and she described her vision to me. Basically she wanted something with a slightly whimsical feel to it, along the lines of her business cards. Her sister disagreed and wanted something more sophisticated. I was told which content areas were to be included, and was also asked to experiment with using a photo of a girl or young woman holding one of her cakes as part of the design. The photo was not yet taken, so stock photos would be merged with photos of her cakes temporarily.

I came up with two rounds of design concepts, some more whimsical, and some more sophisticated. From the first six, she asked me to play around with colors, fonts, and moods from her favorite of the designs

Unfortunately this project died from that point, due to circumstances on both the client and designer side. I am not responsible for the website currently in place by this business.

BTW - Design concept 3 is a photo of my wedding cake

Tags Web Design



Project Artifacts
Design Concept 1
Design Concept 2
Design Concept 3
Design Concept 4
Design Concept 5
Design Concept 6
Design Revision 1
Design Revision 2
Design Revision 3
Design Revision 4
Design Revision 5

Website design

Client - Protiant Data
Timeframe - February 2009
My Role - Designer

The Project
Create design concepts for startup technology business

Tools
Illustrator, Photoshop

A friend of mine is in the process of starting up a new technology company. They have no website at this point, and aren't even sure that the company name will remain the same once funding is obtained. Still, I thought it would be fun to come up with some logo and website design ideas. Nothing has been pursued with this project thus far (and may never); I merely post these examples as demonstration of "corporate" looking design.

Tags Web Design



Project Artifacts
Design Concept 1
Design Concept 2
Logo Concepts