Err: Connection timed out [110] James Carleton » Design - My work and the rest of the design world

Design

Real Fonts on the Web

Posted in Design, Learning, Typography, Websites on April 27th, 2011 by James – Be the first to comment

Backstory
Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we’ve been working in the “web safe” range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs
Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses

Middlemen Services

  • They worry about the licensing
  • Huge selection
  • Simplifies the compatibility mess
  • Fixed Fee or Subscription cost
  • Services:
    • Typekit
      Free/Paid Subscription ($0-100/year)
      Provides a wide selection of fonts, including Adobe’s library.
    • Fontspring
      One-time fee ($0-50 per font), unlimited use.
    • WebType
      Free Trial, Paid Subscription ($10-100/year)
    • Fonts.com
      Free or paid subscription ($10-100/year)
      Also provides a local copy for your mockups.
    • Font Deck
      Free trial, Pay per font, per year ($7.50 average)
    • For even more options, visit this great comparison by Sylvia Egger

How to use @font-face
This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS:
@font-face {
font-family: yourfontname;
src: url(http://www.yourfontfile);
}
p {
font-family: yourfontname, Helvetica, Arial, sans-serif;
}

@font-face is supported by these browsers (and newer versions):

  • Internet Explorer 5
  • Firefox 3.5
  • Safari 3.1
  • Chrome 4.0.249.4
  • Opera 10.54 (Windows & Mac OS)
  • iPad and iPhone iOS 3.1

@font-face file types vary by browser:

  • Internet Explorer only supports EOT
  • Mozilla browsers support OTF and TTF
  • Safari and Opera support OTF, TTF and SVG
  • Chrome supports TTF and SVG.

Services deliver the correct files for each browser, no mess.
If you host your own, you’ll need some help:

So, that all sound great, but what does it look like?
Check out these fonts in action:

Even more info:

So, what are you waiting for? Go explore the new world of real fonts on the web!

Just Released

Posted in Design, Graphics, Websites on January 25th, 2011 by James – Be the first to comment

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

The new carletondesign.com

The new carletondesign.com

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.

Labs

Posted in Design, Graphics, Websites on December 21st, 2010 by James – Be the first to comment

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:

Trend: Lab equipment logos

(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.

The Wrapping Banner

Posted in Design, Websites on October 27th, 2009 by James – 3 Comments

I’ve noticed this wrap-around or folding banner thing showing up around the web. I like it. Simple effects like this add layer and depth to the flat images on screen.

The Wrapping Banner

The Wrapping Banner

Museum of Today

Posted in Design on October 6th, 2009 by James – Be the first to comment

If you have ever been to a science museum, you know what to expect: wild animals preserved in threatening poses, strange bugs from across the planet and, if you’re lucky, some dinosaur bones. Things have changed a bit at the California Academy of Sciences. Last year they completed a major overhaul to their facility in Golden Gate Park in San Francisco, and transformed it into the greenest museum in the world (LEED Platinum). The usual bugs and bones remain, but the exhibits have been designed to increase visibility and interaction. You can walk through a four-story glass orb that contains the rainforest exhibit, explore the amazing aquarium, stare at the night sky in the planetarium, or watch researchers do their actual work in front of you.

California Academy of Sciences, San Francisco

California Academy of Sciences, San Francisco

My favorite exhibit is the building itself. It is packed with green features but none are obtrusive. The average visitor may not notice the solar array, computer-controlled natural ventilation, or rainwater collection, but they will definitely notice the result: a beautiful, light-filled, comfortable museum which prompts you to spend the day learning. The grandest green feature it its 2.5 acre green roof which looks like a green carpet floating above the whole museum. Architect Renzo Piano sketched it with one undulating line. From the observation deck you can enjoy an impressive view of the native plantings and species that call the roof their home, as well as the rest of the park and city beyond. I wish my office was up there; it is amazing.

-James

More info:
California Academy of Sciences
Inhabitat article about Cal Academy

(Note: Article republished from Thomas J Carleton Architecture)

New Collaboration

Posted in Design, My Projects, Websites on August 12th, 2009 by James – Be the first to comment

E&J Design

After two nights of intense design and development, a new site has been released for E&J Design, a collaboration between Eric Ritchey and myself. Nothing like a deadline to motivate! We’re stoked to have it live, but have more in the works for the future. Take it for a spin: www.eandjdesign.com

Browser Wars, Part Deux

Posted in Animation, Design, Photography, Websites on May 13th, 2009 by James – 1 Comment

Remember when everyone had AOL, prodigy, or Compuserve? Those were the days of the original browser wars. Internet Explorer battled it out with Netscape Navigator while websites proudly displayed badges to support their chosen weapon.

browsers

While that debate has faded, there is a new browser war going on, this time it’s Web Designers vs. Internet Explorer 6. You don’t have to look far to find blog posts by designers and developers using vile words to describe IE6. For the un-initiated, IE6 has issues displaying websites built to current standards. This makes make building websites that work for the majority of users much more difficult. Advancements have been made by Microsoft in subsequent releases of IE 7 & 8, but there are still far too many users that have not upgraded to modern browsers. Most power users have moved on from IE to Firefox, Safari or others that are built to facilitate standards based web design, but the IE6 contingency is unfortunately too large to ignore.

What’s a designer to do? Some have taken elitist stance of serving an empty page to IE6 users with a message to upgrade. Others provide a stripped down text only version of their site. This may be justified from the designer’s perspective but isolates IE6 users, many of whom are stuck with it by enterprise IT departments. Sites that must cater to a wide audience go through the tedious effort of adding IE6 specific tweaks to make things work. These tweaks add extra cost and complexity to the development process, resulting in increased distain for the enemy browser.

Some interesting new approaches have emerged that are gentler than the forced methods and bring needed attention to the issue. IE6update.com and pushuptheweb.com have devised tools that attach a message to your site that is only viewed by users of IE6. This message suggests the user upgrade their browser to get the maximum experience. I prefer this kinder approach to bringing users up to speed instead of punishing them for being out of date.

ie6update

pushuptheweb

Despite these methods, IE6 isn’t going to die as fast as designers would like, so we have to deal with it for now. It helps to reminisce about the progress that has been made in the past years thanks to the web standards movement. Be glad we are past the time when every site had a flashing “under construction” graphic, and a 56k modem was cutting edge.

More info:

Photography

Posted in Design, Learning, Photography, Websites on February 15th, 2009 by James – Be the first to comment

I love photography. Life would not be nearly as fun without cameras. Photos can quickly explain a product, express an quality of a company, or provide personal connection to an experience. When designing websites or printed materials, I utilize both stock and custom photography.

Stock photography is an easy and inexpensive way to get high quality images on a huge array of topics. Instead of hiring a photographer to take specific pictures you can quickly find numerous examples online for a fraction of the cost. An example would be the three stock images I selected for the intro page design of Omni Law Group. This firm was seeking a graphic representation of it’s marketing message. The challenge with stock photography is selecting the right photo from the expanse of options. An overall vision of the project’s styling goals is required in order to ensure a cohesive result.

Omni Law Group

Stock Photography - Omni Law Group

Custom photography is best for specific photos, such as a portraits, product shots, projects, or capture events. I recently assisted entrepreneurs at BhatiaOne with custom package designs. Once the designs were printed, I photographed the finished products for use in their marketing presentations. This was a cost effective way to quickly get a new product to a professional level, ready for presentation to buyers. I have also worked with several professional photographers whose talent, training, and experience provide amazing results. The quality of the photography directly impacts the quality of the overall design.

Product Photography - BhatiaOne

Product Photography - BhatiaOne

Stock and custom photos can be a strong design element on web and print media. Creating a cohesive appealing design requires careful selection of photos and coordinating design. The end result can be a powerful image, worth thousands of words.

American Vision

Posted in Design, Graphics on January 18th, 2009 by James – Be the first to comment

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.

avw_screen1

Current Projects

Posted in Design, My Projects, Websites on January 16th, 2009 by James – Be the first to comment

jcd_screen

I’m currently in the process of creating CarletonDesign.com (this blog is part of it) as my new portfolio site to replace jrcid.com.

I can’t wait to convert the design to CSS/HTML so I can insert the new content. I have some great ideas. Now that the design concept is settled, I’m finalizing textures and colors.

I also have been working with Eric at E & J Design on the next version of LEEDstudy.com. Check out that design, it’s still a work in progress.

ls_screen

« Older Entries