Aurelius Capellan

Selected Examples of my Web Design and Development Work

I've been working in web development for over seven years and graphic design for even longer than that. Click the red tabs to navigate. Some of my skills illustrated by this portfolio:

• HTML and CSS hand-coding to W3C Standards specifications
• Cross-browser validation and optimization
• User interface best practices
• Client-side coding in javascript (including frameworks like jQuery)
• Server-side coding in VB.net, PHP, and ColdFusion
• Web project management including requirement gathering, user persona development, wireframing, sitemapping, quality assurance, scheduling, and budgeting
• Online brand development using search engine optimization, search engine marketing, and social media tools
• Web site measurement and analytics

User Workflows and Tool Wireframes

Web Design Project Management and Documentation

As part of the Interactive Producer track I was involved in helping create the Museum of the City, a virtual museum hosted here at PSU.

As part of the program's curriculum, students were taught web design and development best practices and then given opportunities to apply what they were taught towards building the Museum of the City. One of my key contributions was helping produce documentation to help describe workflows for key user to the client and development team.

Web Site Designs

Spring 2010 Projects Focusing on Design

Throughout this term I had the opportunity to collaborate with classmates on a number of freelance web design projects. My focus was to challenge my own abilities by offering creative design solutions based on the needs and requirements presented by our clients and then work with the rest of my team to hone the designs and then build sites from those designs.

Creativity Under Pressure at Design Camp

As part of a Design Boot Camp class given by Portland State University’s Multimedia Program and led by portfolio class instructors, Todd Greco and Tian Mulholland, I and about 20 other students worked through two timed exercises (90 and 60 minutes) that challenged us to think creatively and work efficiently under constraints mimicking the extreme context a web designer might experience.

These two designs are my creations based on varying requirements given to us for the exercises. For more a more extensive description of my Design Camp experience, visit my blog.

Home Page for Therapeutic Associates 2007 Rebranding

Web site design and online branding

In 2007, Therapeutic Associates, Inc. (TAI) hired a marketing company to help update its corporate brand. As part of this rebranding, it was my responsibility as the web developer to redesign the company's public web site to reflect the new brand aesthetics, assets, and attributes. The site complemented the brand aesthetics of TAI’s marketing collaterals which directed clients to online content. I also worked with TAI content providers to create portals for marketing campaigns which offered supplementary web information and measurable calls to action.

The current incarnation of the TAI web site has evolved beyond my design and development involvement. The image attached shows a screen shot of the home page that I designed. Along with the home page, I developed page templates for all other sections of the site which covers various content portals highlighting TAI's services and the portals for the company’s 60+ clinics all spread throughout Washington, Idaho, and Oregon.

Boise PT Clinic Home Page/Client Portal

Web site information architecture and user interface design

As part of a rebranding in 2007 for TAI, we updated the aesthetics and layout of all of the site’s pages to reflect the company’s new branding guidelines. Along with this rebranding, I was responsible for rebuilding the site's architecture and navigation to create a visitor experience targeting patients needing pain relief and wanting to learn the benefits of physical therapy. The goal was to direct these visitors to a TAI clinic in their area.

After a site content assessment and sitemap restructuring, the key update was to the structure of the site’s pages - moving from static HTML pages to dynamic pages based common page templates (built by me in ASP.net). This image shows the template for the main page of one of TAI's 60+ clinics. These templates included dynamic content areas for visitor specific sub-menus, clinic specific information such as news, job openings, director bios, and nearby clinic links. Each page's template was dynamically optimized for search engine visibility for that page's content and keywords.

Home Page for CareConnections (Version 2.0)

Brand Identity Design and Web Design

CareConnections is an online suite of data collections tools and reporting offered by Therapeutic Associates.

Working as part of a small development team, I was responsible for designing the CareConnections brand identity, its associated marketing collaterals, and also the page templates for the customer-facing web portal and web application.

My page designs are still in use on the CareConnections web site, though administration and maintenance of the site has evolved beyond my involvement.

Bertellan.net blog design

WordPress Theme design

WordPress is a becoming a powerful online publishing platform for small businesses to quickly implement a dynamic web site that requires minimal technical knowledge to implement and maintain.

I've designed several web sites using WordPress as the publishing platform. I design the sites so that the aesthetics (the site's theme) can be easily updated by modifying the underlying Cascading Style Sheets (CSS). Bertellan .net is one example.

Portland Lindy Exchange Web Site

Custom site development using HTML, CSS, and Flash

In 2004 and 2002, I worked with creative and marketing teams to implement the web site for a local (to Portland) swing dance event that drew participants from all over the US. The sites gave event information to participants and also included event registration functionality.

For 2004's event, the organizers had developed a dragon logo which I worked with them to expand into an Oriental-flavored web site design that evoked the "Shanghai Tunnels" theme that permeated the event. The site had a Flash splash page which opened into an HTML/CSS coded site.

Temperate Forest Foundation Web Site

Custom site development using classic ASP, HTML, CSS, and Flash

One of my first projects upon inheriting the forestinfo.org web site involved implementing a redesign of the site and a restructuring of the site’s content into a more navigable structure. The site was targeted towards teachers who wanted to learn more about sustainable forestry in order to build science curriculum around sustainable forestry topics. The secondary audience for the site was sponsors of the non-profit who needed to be kept apprised of the Foundation's events and activities.

The redesign implemented web standards based HTML and CSS into the page templates. In addition, the site included some javascript and (at the time Macromedia) Flash user interface elements. I was responsible for not only the site's design and development, but I also was the primary content provider and editor for the site's numerous sections.

Therapy Network Alliance Interactive US Map

Flash Development

This is a widget that I created for the Therapy Network Alliance web site using Adobe Flash. The widget reads an XML list of (in this case) rehabilitation networks by state and activates states containing active networks on the map. Each active state can be rolled over with the mouse to see the active network in that state and the user could click on the state to navigate to a separate page.

You can interact with the map on Therapy Network Alliance's web site

TAI "Key Person" Career Profiles for Physical Therapist Recruitment Campaign

Multimedia Brand Strategy Development and Design

As part of a recruitment campaign of physical therapy students, I worked with the TAI recruitment director to create a multimedia (print and web) campaign to promote TAI's Key Person career track as a differentiator for a career with TAI. Together we determined that the key message for the campaign was the Key Person program and we decided to illustrate that track by showing the career track of existing clinic directors. The campaign was executed as a brochure insert to be distributed at recruitment events and start a conversation about what the Key Person program was. Students could then visit the URL included on the inserts to get extended biographies of the directors and learn how any PT could follow the same career path at TAI.

Various TAI Posters and articles

Graphic Design, Print Production, and Online Marketing Strategy

I was a graphic design resource for the TAI marketing team for several years. During my tenure, I designed numerous posters, flyers, ads, and articles for use in promoting the company and its programs and services. In my crossover role as the Web Developer with a graphic design background, I was also able to help develop and synchronize specialized web content to our print marketing and coordinate web portals to funnel and measure targeted audiences to specific content on our web site.

Examples here include a poster advertising Athletic Training Services for youth soccer players, a poster concept for a marathon training run series, and an article template for regular articles published by TAI's therapists in regional sports magazines.

Forestry Education Kit Contents/Instructions

Graphic Design and Instructional Design

As part of its mission to promote sustainable forestry education, the Temperate Forest Foundation offered an "Education Kit" containing various tools that could be used by middle- and high-school teachers to illustrate sustainable forestry concepts, based on curriculum developed by the Foundation. The kits were assembled by hand at the Foundation and this content/instruction sheet was included as an "owners manual" for Education Kit users to get started.

I complied copy for this piece, took and edited all the photos, and designed and executed the layout of the piece which was printed in-house and hand-inserted into every Education Kit the Foundation distributed.

Temperate Forest Foundation Product Catalog

Graphic Design and Print Production

The Temperate Forest Foundation offered numerous products for helping educate teachers about sustainable forestry topics as well products for use in teaching sustainable forestry curriculum in the classroom. When the Foundation produced a catalog to advertise its products I was involved in designing its layout, collecting copy, photographing products, and publishing the piece.

Temperate Forest Foundation Magazine Ad for Forestry Education Products

Photography, Graphic Design, and Print Production

Each year, the Temperate Forest Foundation published a full-page ad in a national trade publication to advertise its educational products. These two ads appeared in full color in separate years. The first ad was intended to highlight the summer forest tours the Foundation organized to teach middle and high school teachers about sustainable forestry. The second ad promoted the line of educational tool the Foundation offered to help illustrate sustainable forestry concepts and enhance curriculum in the classroom.

I was also designated photographer on the Foundation's summer Teachers' Tours and my tour photographs were used in these and other Foundation print and web collateral.

Bertellan Wedding Invitation

Graphic Design, Typesetting, and Print Production

The theme of this wedding invitation incorporated the theme of luck integrated with some personal storytelling and iconography associated with the bride and groom. I designed a simple two-page invitation that was intended to be self-published and assembled

Selected Infographic and Logo

Digital Illustrations

A selection of my digital illustration work including an infographic illustrating a career development track at a physical therapy company and an identity logo for a corporate web development team.