Design of the ESTRELA website began with a number of pencil & paper sketches, resulting in two distinctive styles & layouts. The final design (shown left) focuses on the need for urban business and development to integrate with nature on both an aesthetic and globally beneficial level.

It’s sometimes difficult to design around an existing logo, especially where a specific look is desired, but I believe that the design and layout I have developed for ESTRELA Sustainability Consultants marries well to their established brand.

It has been a pleasure to work with both Robert Carlson and Linda Scarlett, and I am thankful for the opportunity to work with them, delivering an attractive, user-friendly, and eco-conscious web-presence.

I wanted to give give this site an organic feel and tried to stay away from too many rectangular elements.  After designing the sloped frame of the header and content area, I decided that I didn’t want to use the standard social networking icons, so I created custom ones and adjusted the colors so that they still represented the basic tone of each social networking site, while working nicely with the Tuscan color scheme.

Kiktavi.com is built on top of Wordpress for ease of content management, and includes flash galleries, a contact form, social networking links and video (coming soon!).

Currently there is a temporary hold on the site’s content, while the company is writing new copy for each page, as well as developing video presentations.

Originally an online community for photographers around the world to talk, educate, laugh, learn, and develop friendships, Hideout recently made the transition from forum-based community to online magazine. Hideout Magazine offers tutorials, interviews, galleries, educational articles, and other photo-related goodness!

Kina approached me in February of this year in hopes that I could meet her design and development needs which included a custom-themed CMS-based site (Wordpress). I quickly began working on sketches and mock-ups based on her initial desire for Hideout Magazine to actually look like a magazine, one with a more retro feel.

I began pouring through magazines I had around the house to get an idea for quote box designs and other types of page decor and layout, and shot some custom photos of a 1968 issue of Rolling Stone magazine to create the seam and layered page edges that I incorporated into the design.

As for the logo, Kina expressed an interest in vintage-eque typefaces. I eventually chose Bebas for the logo — a strong, bold type that invokes the feel of mid 20th century print publications.

To add some flavor to the home page, I used one of my favorite plug-ins, Featured Content Gallery. It’s an interactive image rotator that serves up photos associated with chosen featured articles.

Other implementations include social networking functionality, a flash gallery, homepage excerpts and a contact form.

Kina is very pleased with the final product and outcome of our business relationship, and has received some great feedback on the look and feel of the site. I am thrilled to have had the opportunity to work with Kina, and highly recommend her for any of your photographic needs!

First, here is a little about OWCS from their site:

“Originally created as part of the Oregon Women’s Political Caucus over 25 years ago, the school is an independent, non-partisan, non-profit organization run by a board of volunteers and financed entirely through voluntary contributions. The Oregon Women’s Campaign School, while dedicated to getting more women involved in politics and elected to office, isn’t just for women! Any pro-choice person who wants to learn more about running for office or about working on issue and candidate campaigns is eligible to attend.“

OWCS is another perfect example of why I love Portland, right along with Our Oregon and Defend Oregon, and the overall feel of the city itself, which is largely focused on progressive thinking.

Before beginning the site design, I wanted to focus on the logo first, since that could very well dictate the design. I had been sketching ideas for the logo on and off since October, with a new set that I presented in January. While none of my original designs were picked, a combination of two of them was decided upon, resulting in a nice clean brand, – simple, yet unique, bold but not loud, and what I feel is both modern and relevant for years to come.

The website design came shortly thereafter, having sketched a number of layouts on paper first – a practice that has really freed me up to put down what I think up, immediately, avoiding some of the drawbacks to ’sketching’ in Illustrator or other graphic programs.

I came up with three variations, one of which was toned down quite a bit in case they wanted a more simplified design. The version chosen was the one I had really hoped for, and to make things even easier, they chose a color scheme from one of the other mock-ups.

The header image required the most work. The images they wanted used were of different resolutions and a few of them pretty low quality, so I had to employ the use of some filter effects to get them all working more or less together.

Designed on top of WordPress for ease of content management, I was able to find a couple of plug-ins to help OWCS better manage their registrations, such as the inclusion of a form plug-in to meet their need for a brief questionnaire on the registration page. The site also includes a contact form, something I like to include in most of my WordPress designs. Typically, I don’t like to use too many plug-ins within a CMS, since the more you add, the more chance for code to become invalid and other conflicts to arise.

I had never worked on a politically-oriented site before, so I was a little concerned in the beginning about creating a unique look that still gave that ‘political’ kind of feel. But in the end, I am very pleased how the OWCS website turned out and very happy that the board members of Oregon Women’s Campaign School love the new design!

I was first contacted by Orna through a company that I occasionally do freelance work for, Chipboard Creative. This would be the second health-oriented practice I have designed for. From day 1, my experience with Orna has been one of the best designer-client experiences I have had (they’ve all been exceptionally good) and I hope to work with her again should she have any future web or print design needs.

The logo, previously created by another designer, dictated the color scheme and heading elements of the site. One thing she knew she wanted early on in the process, was something a bit more ‘catchy’ for the title headings of the content area. After showing me some examples of sites with heading styles she liked, I had (what I like to think of as) a stroke of brilliance, and created the reduced-opacity salmon heading, tying in the logo with the content area, nicely.

Since this is a western Oregon-based practice (and because of the name of the practice), I felt it should have a very ‘Oregony’ feel, which meant greenery and fir trees — all of which I believe have been successfully accomplished, from the overall color and tone, the sloped treeline to the right of the header area, down to the post-footer’s semi-transparent treeline.

The navigation bar, is another one of my favorite sections of the site. A simple, right-floated, text-driven menu with drop-downs, and social networking icons and an internal search-bar to the left.

Each page has it’s own sub-header photo, all of which were taken by Dr. Izakson, herself. The photos are stunningly beautiful and add a richness to the site, keeping the design fresh with each page load.

I wanted to separate the sidebar from the content area with some kind of divider, but wasn’t content with completely separating it from the content, nor did I want to use a solid, 1 color border. I finally created a slight ’scored’ effect, giving the main wrapper a bit of depth and physical feel.

The sidebar was of particular focus in the latter stages of the design’s build. Sidebar content varies from one page to another, something I hadn’t really worked with before. This required a bit of research, but I finally located a plugin-in which allowed us to easily choose which sidebar items appear on what pages. The decision to do this stemmed from Orna’s desire to have the tag-cloud and blog categories on the blog page only, and not throughout the entire site.

The footer was kept relatively simple. I suggested adding her address and phone to the footer, filling it out a bit, as well as providing contact information, on each page of the site. Orna loved this idea, so I forged ahead, keeping contact info to the  right, copyright info to the left, and Taproot Web Hosting’s icon, center. Taproot is a company that Orna very much wanted to support and help promote. The final footer design shows a nice, clean and balanced layout that closes the bottom of the page, nicely.

While there were a number of revisions along the way, the final version remained fairly true to the original mock-up idea she had chosen from the 5 I presented to her — something that doesn’t always happen in the field of design.

Celilo Natural Health Center is built on WordPress for use as a CMS and as of this posting meets W3C validation requirements for XHTML and CSS. It is also compliant with all current, major browsers, as well as IE6 & 7.

I want to thank Orna once again for a lovely design experience. She became my ‘No. 1′ fan, and took it upon herself to promote my design services by word-of mouth — and continues to do so. For that, I cannot thank her enough! Orna, you rock!

As mentioned, Celilo Natural Health Center is hosted through Taproot Web Hosting, a local green hosting company  that I happily recommend using.

When FuR and I first began brainstorming how the site would look, she mentioned the possibility of incorporating a planet into the design, as her website is called Planet FuR Productions. I liked this idea, though at first I wasn’t sure how I would approach it. My first idea was to create a vector design, providing a more cartoonish & quirky look. After spending a few hours sketching out and and creating a mock-up in Illustrator, I just wasn’t feeling it, so I decided to rethink my approach.

For some reason National Geographic and Omni magazine came to mind, as I envisioned a more ‘realistic’ looking planet with a nebulous backdrop. Inspired, I began my new layout. I quickly ran into the problem of finding a planet that I could use. I didn’t like the idea of using stock art or an actual photograph of one of the local celestial bodies, so I attempted to make my own.

My first result was nothing short of unspectacular. Really. But my second approach resulted in pretty much what is seen here, just a bit more rough. FuR is fond of purple, and hoped to have the color in some part of the overall design. As highlights, link and borders, it didn’t quite have the spark either of us had hoped for, so we opted for the more burnt-sienna color for those elements. Still wanting to honor her desire, I adjusted the hue of some of the planetary layers to bring out just a touch of purple.

The planet image is actually a texture of sedimentary rock, which has been spherized (among other things). The galactic background is really a texture of fireworks against a black background, which, in my opinion, looks rather well as stars and star-clusters. I could have probably found a royalty free image of the actual galaxy, but I liked the idea of creating my own.

For a bit of variety, the About page has the planet in a state of solar eclipse, while the gallery pages have only the star backgrounds, with a reduced opacity to bring the gallery thumbnails forward.

This WordPress design uses the NextGen gallery plugin for the home page mini-gallery as well as the individual photo and glass galleries. It also includes a contact form and popular social networking icons.

Coding the design was a bit tricky with the mini-gallery on the front page, but went smoothly after that. The site is currently XHTML and CSS valid, as well as compliant with all major browsers. Included is a separate conditional stylesheet to display the site correctly in IE7.

Working with FuR Gebhardt was a fun and enjoyable experience and I look forward to working with her again in the future!

The Men’s Resource Center & Women’s Counseling Center provide respectful, effective counseling services to individuals, couples and families striving for safe and healthy relationships.

The Design

I wanted to try a different approach with this design. In my experience, organizations such as this, along with other types of counseling centers tend to have websites that are very business-y, which is fine, but in some cases, the look is downright drab! I wanted to give a fresh face and appealing look to MRC’s website, as well as create a design that was representative of Portland, complete with an eco-friendly, home-grown look.

MRC needed a design and build that fit their budget, so with that in mind, I got started and provided them with two design options of  reasonable costs.

The first design (pictured top-left) was intended to use WordPress as it’s backbone, and was a bit more “flashy” using a lot of vector image elements. The second design (pictured right) had a similar feel, but was trimmed down, with minimal art and a simple layout.

One theme that is consistent with both designs, is the house. This is the building that the MRC’s Portland location operates from. It is a beautiful, Victorian-styled building on 14th St. and Sandy Blvd. A photo of the house was a prominent fixture of MRC’s original site and I wanted to carry that over into my designs. A photograph of the house didn’t fit well within the designs I had in mind, so I decided to build a vector version of the house in Illustrator, which is what you see in these two designs.

The version that was chosen was the more minimalist option, sans WordPress install, but with pure, valid HTML & CSS. The only change they requested was the color. They felt that the Dreamsicle orange was a bit too bright and cheery for their tastes, and asked for a more neutral color. I re-worked the scheme and presented them with an Earthy-blue version with pleasant green highlights. They were pleased with this new look and I was given the go-ahead to begin the build.

The only portions of the designs that were not mine, were the logos, which had already been established, so I did my best to incorporate them into my layouts by making some color adjustments.

If you haven’t caught the links throughout this post, you can find their site here: Men’s Resource Center & Women’s Counseling Center.

I am appreciative of the opportunity to work with MRC, and for the freedom of expression allowed to me while creating their online presence.

This project was a bit new for me – a UFO focused blog/news source, but I had some ideas churning around and was eager to get started. I felt it best to stay away from the typical sci-fi look, so there are no cheesy UFO images or alien faces in this design!

After a few very rough sketches, I opened up Adobe Illustrator and got to work. What I came up with was a stylized, yet unobtrusive theme that allowed for the reader to focus on the articles without being distracted by design elements. Two of the ways I achieved this was by using a light gray for the section outlines and a predominantly white background, while the headings and post-text were a significantly darker charcoal gray. This allowed the content to sort of ‘pop out’ at the reader .

The sidebar content layout was of particular focus. A lot of blogs (and I’m not going to name names) have so much going on in their sidebars that it makes navigating the site a bit of a headache. Without using a bunch of separating lines or background colors, I stuck to the use of padding, margins and colors to separate individual blocks.

This site was built on top of Blogger for use as a CMS. I have worked with Blogger in the past (see my Deirdre and the Sorrows design) and admittedly, its kind of a pain – mostly because unlike WordPress and other popular content management systems, Blogger uses it’s own propriety code. Because of this, Blooger blogs are not W3C compliant and do not validate. All Blogger sites suffer from this. That said, I managed to create a solid 3 column theme without running into any major bumps along the way. And in Blogger’s defense, it is a very good, banner-less, & free blogging and CMS service, allowing users complete customization.

You can find the blog here.

SansLux.com is a site conceived of and designed by entrepreneur and sister designer, Stacy Bias. It is an experiment in “living without” in regards to luxuries, versus necessities. Each week, Stacy gives up one item such as television, music, make-up or spending, and blogs about her daily experience sans that luxury. It is a unique exploration into the bondage of human indulgence and it’s often unseen effect on our lives.

Build

My involvement with this project was on the coding side, taking Stacy’s beautiful, streamlined, social network-friendly design from a detailed graphics file, and implementing it into a functional website. WordPress was the CMS of choice for this minty-fresh endeavour.

This is one of my more extensive forays into layout, creating unique post box stylings for the front page and category sections. It was also one of the more detailed designs I was given, being extremely thorough – right down to individual functions and font stylings! The site is compatible across all current major browsers, as well as IE 6 & 7 (imagine that!) Take a look!

Also, check her hosting company, Taproot, for excellent hosting that is not only affordable but also 100% wind-powered!

The Site:

Queerky is a friendly, funny & snarky queer women’s website. It provides regularly updated content including articles (such as the recent exclusive interview with Amy Ray of The Indigo Girls), blogs by prominent members and photos.

The core of Queerky is a lively, ever-growing forum where queer women from all around the world meet up, make friends, let off some steam, seek advice, sharpen their wit and post goofy pictures of themselves.

The Design:

Below you will see some logo ideas I initially presented to Lepus, the owner of Queerky, when a few ideas struck me during the layout process. Lepus felt that they would work better for a more “techy” kind of site and I am inclined to agree. Due to the large amount of work I was doing on the site as a whole, I asked my friend Chris Baunach if she wouldn’t mind giving the logo a go herself. The end result is the Q logo that currently brands the site. Thanks Chris!

The choice of color-scheme for Queerky was a difficult process, as was the overall design and layout. Queerky went through many incarnations as Lepus and I brainstormed what we would want on the site, where we would want it, how we wanted it to navigate and finally, how we wanted it to look. Eventually, we chose a scheme that we both agreed upon and the site design finally began to fall together. Queerky was purely a labor of love and because of that, there were chunks of time I couldn’t devote to it due to a number of client projects. But on January 5th, 2009, after much caffeine, slicing, testing and tweaking, the site was launched.

While both Lepus and I whispered sighs of relief at the completion of Queerky, we spent much of the week following launch, trouble-shooting items on the forum side as well as incorporating additional sections and formatting to the front page.

Queerky’s design and layout was built on top of WordPress for use as a CMS. I hadn’t worked with WordPress prior to this, and while there was a bit of a learning curve in the beginning, by the time the site was completed, I not only had a thorough understanding of WordPress, but found I enjoyed it very much – so much in fact, that I designed and built this portfolio on top of it!

You can visit Queerky here: www.queerky.com ]]> http://dwarvenbrassiere.org/test-post/feed/ 0