James Carleton

I have completed a redesign of my personal portfolio website. Visit carletondesign.com to check it out.

I thought I would let you in on the design and development decisions behind the project.

Design
First, let me say designing a site for yourself can be a bigger challenge than pleasing your pickiest clients. I went through multiple iterations of several different design directions before settling on the final styling. The earlier versions had fine details, textures, and color tones that were really nice, but the problem was, I was making more work for myself than necessary. I realized that my site doesn’t have to showcase my finest details or adhear to the latests design trends. Instead, I turned toward simplicity. I cut the personal monogram that perfectly balanced positive and negative space which boasted a brushed metal texture and realistic highlights and shadows. I cut the multi-state navigation menu that had a mechanical feeling I loved. Instead, I thought, what would the site look like if I used zero graphics (other than the portfolio images) and only text. This self imposed constraint roped in my creativity and allowed me to focus on getting it done. I had the design comp done in a half hour, and I loved it. The layout is simple, the details are subtle and it’s designed to focus the visitor on my work and the calls to action. I also designed the copy to reinforce the simple, get to the point style, that is me.

Development
The simplicity of the styling inspired a simplicity in the code. I worked to keep the code clean and flexible. It validates!. The layout’s simplicity also hides it’s best feature: flexibilty. If you didn’t notice, go back and resize the broweser window. Watch the site adapt acordingly. Thanks to some inspiration from Ethan Marcotte, the images and layout scale based on the size of the browser window. I’ll be digging deeper into these strategies and making further improvements, but I love how it works so far. I first coded the site without the CSS3 drop shadows, transparency or fonts. Once the foundation was laid, and tested, the embellishments were added. I have the advantage of focusing on an audience that uses the latest browsers, so I took a vacation from the usual struggles of browser compatibility and had fun with some nice features. The most visual feature is the custom font, Museo sans from Typekit. I love typography and have been folowing the boom in web fonts closely. I’ve used @font-face before but thought I would find out what all the hype around Typekit was about. Now I’m a believer. In a matter of minutes, I had a cross-browser/platform solution that enabled me to use a wide variety of high-quality fonts on my site. Wow, thinks sure have changed.

Like most websites, it’s never done, but reaching this point feels great. I enjoyed designing and developing this new site and hope you enjoy browsing it.

What do you think of when you see a beaker full of unknown liquids? Scientific experimentation comes to mind. I’ve noticed a rise in logos and illustrations which contain a scientific symbols, such as beakers or test tubes, used to represent the experimental qualities of web/software companies. Here are a few examples that work well:

(Images property of their respective owners.)
I like the idea of borrowing the symbols from a traditional field to represent something new in technology. I used the term ‘lab’ as part of a name for a friend’s new co-working space and love how it symbolizes groundbreaking ideas in action.

It is amazing to watch a child grow up with technology as normal while the older generation is still figuring it out how to adjust to it. My one year old spends most of the day pushing buttons, opening doors, or trying to take things apart. Hopefully, that desire to learn how things work will last a lifetime. I can only wonder what the future will be like. The world is changing fast. I wonder if anyone predicted that information would be so accessible though the internet. It is simple to learn so many things that previously were confined to trained professionals. Websites and online tools allow you to manage your banking and investments, publish a book, sell your original music and much more.

Open access to vast knowledge has eliminated the traditional barriers to entry into many fields of work. Web design is a field that has no such barriers. Anything you need to know about web design is available online and can be self-taught. Many professionals started out tinkering and then developed their new skills into a career.

Why it is valuable to pay for professional web design if it’s so easy to do?

• Time: Web design basics are simple, but it quickly gets complex and takes a lot of time to develop professional level skills.
• Experience: Like any profession, there is immense value in practical experience.
• Standards: Professional web sites should be built to web standards. These standards are a benchmark that separate professionals from amateurs.
• Style: This aspect is subjective. Generally, professionals have a higher quality of aesthetic style.

So if you need a professional website, hire a pro. If you’re a technology sponge, start learning and soon you may have a new career.

My recent interest in pro cycling has led me back to the design world in a round-about way. I discovered this amazing chalk mural created in support of Live Strong from a  post on Lance Armstrong’s twitter. Nice work James Jean! More details at SuperTouchArt.com.

I’m currently collaborating with Elias at American Vision Windows (plus Kitchens & Baths) to create a power point presentation for their sales team. His goal is to provide the team with better tools to quickly communicate the uniqueness of their company to potential clients. For example: AVW’s mission is,“to revolutionize the home improvement industry one customer at a time, while changing the lives of our employees for the better.” It’s not often a company focuses its success on its own employees instead of its bottom line. The in-home appointment requires our presentation to be quick, clear, and effective. To facilitate the wide audience of the presentation, we will be organizing the presentation so the salesperson can quickly jump to various sections as needed, instead of following a fixed path through the information.