In 2010, 8% of all websites on the internet were built on WordPress. In 2011, that number more than doubled to 17%. If you look at newly registered domains, that number jumps to an astounding 22%.

Want to get in on the future of web design? Then you won’t want to miss this evening with Chris Ford, Creative Director of Creativity Included as well as a WordPress/Genesis theme developer, educator and evangelist.

In this introduction to WordPress and Genesis, Chris will demonstrate a variety of tools that can help you do less repetitive coding and more designing (which is really what you want to be doing, right?).

Why WordPress?

Chris will talk about the benefits of using the WordPress platform as a content management system. If you thought WordPress was just for blogging, it’s time to take another look! Recent additions like custom menus, post formats and post types have made it a powerful tool for managing all types of sites.

Why Genesis?

Chris will share with you why she works exclusively with the Genesis framework–including it’s excellent security, built-in SEO options, consistency in coding and flexible layouts. It’s also incredibly easy to update, and thanks to the parent/child relationship, you can update the core without worrying about losing your changes!

Why Premium Plug-Ins Rock

It used to take a team of coders at least a week to build something it takes 15 minutes to put together using the premium Gravity Forms plug-in. If you want to show an amazing product demo, video gallery or portfolio there’s no slicker solution than SlideDeck Pro. And you can use Cart66 to integrate e-commerce capabilities into a site for a fraction of the cost of a custom solution. Premium plug-ins free you from having to code custom solutions to common problems, so you’re not reinventing the wheel on every new project.

We’ll cap the evening off with a brief Q+A session.

Are you ready to get started? Register now!

Thank God that I had the hard drive I transferred from three months ago safe in a snug neoprene pouch, and that I was too lazy to clean up my desktop, so all but one chapter of the Branding 101 book was saved. And the pictures of my niece’s first birthday were transferred to the old drive right before the switch. So it could have been worse. Much, much, worse.

But yeah – go back up now anyways

“Think back to the first time you saw the Internet. Not just saw it, but really got it. That ‘oh wow’ moment when you realized how important this could be. It doesn’t matter if it was last decade or last week. We want that story.”

I really love this idea, because Derek (although I’m sure he is totally unaware of it) is right on the fuzzy edges of my first “Internet Moment”. It was 1994-95-ish, and I was just about to graduate from the Graphic Design department of my local community college. I had taught myself Macromind (yeah—MacroMIND) Director, and was in the process of creating the first interactive portfolio in the department. At that time I was debating the idea of taking out some hefty loans and continuing my education at ArtCenter in Pasadena.

Then I had a talk with my multimedia professor. (Shut up. It’s what it was called back then.) He was moving on to a job in San Francisco, and they were looking to hire a whole slew of “Web Designers”. He thought that I showed potential learning new things quickly and might be able to transition to this brand-new field.

I had been on the internet (well, AOL) before, so it sounded kinda cool. My friend Jovino had hooked me up with a shoebox-sized 2400 BPS modem and an AOL 1.o CD (which, by the way, I have kept to frame for my office one day), and I spent pretty much every waking hour I wasn’t working or in school on it, smoking cartons of cigarettes and guzzling Big Gulps all night long while downloading free fonts, talking design history with students in other time zones, reading John Styn’s Prehensile Tales and piling up $200/mo bills. (Internet history tidbit: AOL used to be like a taxi—the meter kept clicking as long as you were on. Some nights, when I was downloading a huge 500k file, I would set my alarm so I could wake up and turn the computer off at 4am so I didn’t keep racking up charges).

It was cool, but hadn’t changed my life or anything yet. I didn’t really go to “Web Pages” other than John’s and mainly stayed in the gated enclave of AOL most of the time. I hadn’t even touched the copy of Adobe Page Mill I’d won at the last AIGA event I’d gone to. It was mainly a way to exchange snarky repartee with other people like you.

So I asked my current paramour (who, luckily enough, is still sitting beside me on the sofa drinking her coffee and looking just as cute) if she was down for a week in SF, my treat, so I could go on this job interview and see what this “Web Designer” thing was all about. She said yes, we hopped a plane with 3/4 of my entire wardrobe and I went on my first official job interview.

I showed up at the building, hopped in the elevator, and hit the button for my floor. The elevator started rising, and this weird glow started surrounding me about halfway up. Everything in the box just took on this frantic, creepy, almost fleshy pink tinge.  Then the doors opened up, and I could see why. The entire wall facing the bank of elevators was painted a throbbing neon pink. You see, my professor, who was starting a job at Wired Magazine, thought I might be a good fit for this new venture they were going into called HotWired. COOOOOOOOOOL!

I don’t remember much of the interview—my jaw was on my chest pretty much the whole time, and I’m sure I looked like a total idiot, because all I could verbalize where things like “WOAH!” and “WOW!” and “AWESOME!”. The guy interviewing me showed me the site they were launching, and it was like something just clicked inside me. It was my first internet “A-ha!” moment, really. This stuff here—this was a revolution. It was just waiting for people to come along and mold it into what it could be. And I really, really, really wanted to be one of them. In one moment, the course of my entire career had changed. I wanted a job that would let me help figure out what this whole new untouched medium was going to be. I wanted to do what they were doing, and I wanted to start RIGHT NOW!

Unfortunately, even though there were only about 10 html tags at the time, I didn’t know a single one of them, so I didn’t get the job. And I didn’t get to work with Derek, who was one of the driving forces behind that site. I also didn’t go to ArtCenter. I took my CD portfolio and convinced a local skateboard company that I could learn HTML fast enough to help build their website. And I followed every single article on WebMonkey, where Derek and the rest of the crew taught me about everything from animated GIFs to frames to nested tables.

So here I am, over 15 years later, still as stoked as ever to be working on the internet. To see the promise of some of the things we dreamed about back in the day come to fruition because of the people you followed is amazing. Web typography amazes me every day—and it’s all thanks to another WebMonkey. The concept of Responsive Design makes me a little gooey inside (oh, media queries, how I can not wait to learn more about you!) I still look to Zeldman’s many sites  for advice and inspiration.

Bottom line, I still can’t wait to see what’s next. That first internet moment repeats itself over and over for me as this field has invented and reinvented itself. It’s unpredictable, your skillset need constant updating, and a 12 hour day is a short one, but I still can’t imagine doing or being anything other than what that day turned me into—a web designer.

Thhis eBook covers a variety of topics including
• Recommended tools and skills for successful theme customization
• Add a custom header
• Customizing the navigation (including using custom menu classes)
• Using AdRotator to manage your ad widget
• Customizing graphics (from coloring a PNG file to editing PhotoFrame PSDs)

Get started making Family Tree your own!

Buy Now

2. Submit the URL of an existing site

3. One of the URLs will be used to create a class demo

4. After class, the winner will get the layered PSD file

So $40 will not only get you a class packed full of tips, tricks and resources for making your own cool blog headers, but you could also walk away with a custom blog header designed by Chris Ford. Pretty cool, right? You need to sign up for the class by 12pm PDT on May 28, 2011 to be eligible to win. The winner will be chosen at random.

What are you waiting for?

Sign Up Now

One of the students in my Family Tree class asked how I replaced the Nav Extras RSS links with my own Social Media (RSS, Facebook and Twitter) links (including icons). It’s pretty simple, really. The code from Creativity Included was pulled into the recently renovated Family Tree theme in the example pictured above.

functions.php

First, I filter out the old RSS links

remove_filter('genesis_nav_items', 'genesis_nav_right', 10, 2);
remove_filter('wp_nav_menu_items', 'genesis_nav_right', 10, 2);

Then I create a new function to replace the one I removed

add_filter('genesis_nav_items', 'child_nav_right', 10, 2);
add_filter('wp_nav_menu_items', 'child_nav_right', 10, 2);
function child_nav_right($menu, $args) {

Next I check to see if the nav extras are enabled

    $args = (array)$args;

    if( !genesis_get_option('nav_extras_enable') || $args['theme_location'] != 'primary' )
        return $menu; 

    if(genesis_get_option('nav_extras') == 'rss') {

I set up a variable to hold the RSS link info

        $rss = '<a rel="nofollow" href="'.get_bloginfo('rss_url').'">RSS</a>';

I do the same for my Twitter link info

        $twitter = '<a rel="nofollow" href="https://twitter.com/username" target="_blank">Twitter</a>';

And finally my Facebook link info

        $facebook = '<a rel="nofollow" href="http://www.facebook.com/pages/City-ST/Business-Name/999999999999" target="_blank">Facebook</a>';

I string them together to build the menu component

        $menu .= '<li class="right rss"><span class="rss-icon">'.$rss.'</span> <span class="twitter-icon">'.$twitter.'</span> <span class="facebook-icon">'.$facebook.'</span></li>';
    }

Otherwise, I want to use the default nav right menu

    else {
        $menu = genesis_nav_right($menu, $args);
    } 

    return $menu; 

}

style.css

Edit the block of code flagged /* rss option

This basically sets up a unique icon for each link. The hover state changes the background position, allowing you to have a rollover effect. Sprites rule!

#nav li .rss-icon a, #nav li .twitter-icon a, #nav li .facebook-icon a {
	overflow: hidden;
	margin: 0 0 0 10px;
	padding: 3px 0 3px 18px;
}

#nav li .rss-icon a {
	background: url(images/icon-rss.png) no-repeat 0 0;
}

#nav li .twitter-icon a {
	background: url(images/icon-twitter.png) no-repeat 0 0;
}

#nav li .facebook-icon a {
	background: url(images/icon-facebook.png) no-repeat 0 0;
}

#nav li .rss-icon a:hover, #nav li .rss-icon a:active, #nav li .rss-icon a:focus, #nav li .twitter-icon a:hover, #nav li .twitter-icon a:active, #nav li .twitter-icon a:focus, #nav li .facebook-icon a:hover, #nav li .facebook-icon a:active, #nav li .facebook-icon a:focus {
	background-position: 0 -18px;
}

Let’s get that out right up front. My entire career revolves around WordPress and the Genesis Theme Framework in some way or another. I design premium Genesis child themes for StudioPress and Theme Garden. I customize those themes for clients. And recently, I started classes teaching about everything from creating cool blog headers to branding using WordPress as your CMS. I think it’s a great tool. I love everything about it. Except…

Something is missing

When I worked in design studios, we usually had a highly structured process for every new project we started. In fact, I’m pretty sure most shops had an entire web page devoted solely to their “unique” process, because at the time (the archaic mid-90′s) we thought it was pretty darn  revolutionary. It usually went something like this:

I don’t know what it is about WordPress sites—maybe it’s because so often we start with a theme—but too often we, as designers, skip vital steps in the web design process. We jump straight from signing the contract into choosing or designing a theme. We pick out color palettes and make webfont kits without ever thinking about a site’s goals or how a user might interact with the site. We depend on the theme we’ve chosen to make those decisions for us. But good design is at least 50% usability. If your site has the Most Beautiful Design Ever™, but nobody can figure out how to buy something, or has a hard time finding the information they’re looking for then the site is not well designed.

Those who fail to plan plan to fail…

If you wanted to build a shed in your backyard, you’d draw up some kind of blueprint first, right? You wouldn’t just pick a paint color and hammering away. If you did, unless you were some kind of shed-building savant, you’d most likely wind up with a pretty sad little shed. The same thing goes for a website. You need to know what you’re going to build before you start building it. Skipping the planning part of the project is why that “simple” web project turns into the client wanting 856 revisions. Or needing to swap themes in the middle of a build. Or spending 8 hours coding a component the client didn’t really need. Or just producing a website that doesn’t provide a very memorable or smooth user experience.

Ask Yourself These Questions

Whenever I’m planning a website I always ask myself three vital questions to ensure that I know what to build:

What type of content does the client have?

If they have an existing site, I go over it and see what categories and tags they’re using. Do they post a lot of blog posts? Are they short or long? Do they use a lot of images? Videos? Block quotes? What do they post about the most? Do they have a newsletter signup? Social media icons? Do they *really* need a search bar, category listing or tag cloud?

How should I organize that content?

I ask myself about the goals the users will have – I usually set a primary, secondary and tertiary goal. For instance, if you have a crocheting site you may decide your primary goal is to sell your custom work, a secondary goal is to sell your custom patterns and a tertiary goal is to get people to sign up for your newsletter. When you organize the information, it should be with those goals in mind.

How should I execute that content?

Once I know what I want the website to do, that’s when I determine what tools I will use to accomplish my goals. I will choose a theme with functionality that matches my needs. I’ll find plug-ins that allow me to extend functionality (for instance, a newsletter, contact form or e-commerce solution). Then, when I start designing, I don’t waste time going down roads that don’t help me help the end user accomplish their goals quickly and easily.

We’ve got some all-new classes posted for May and June now! After our first few Genesis-only classes, this Spring we’re expanding into other areas.

Information Architecture for WordPress

MAY 26 | 12PM – 2:00PM PDT | $80

• The web design process explained (Information Gathering, Planning, Design/Develop, Test)
• How WordPress classifies content and how that affects the planning process
• Wireframing explained
• Using content as interface element

More Info

Tips and Tricks for Making Cool Blog Headers

MAY 31 | 10AM-11AM PDT | $40

• Illustration and photography resources
• Making stock illustration your own
• Treasure troves of typography
• My favorite “quick and dirty” Photoshop tricks
• Creating your own library of tools

More Info

Branding 101

JUNE 9 | 11AM-1PM PDT | $80

• The discovery process
• Crafting a creative brief
• What to do if you are your own client
• Mood Boards
• Research
• Creating a brand guideline document

More Info

there’s room in the schedule for one more…

We’ve got room in the schedule for one more class, but we’re not sure which one to offer – so we figured we’d ask you guys and see what you think!

Oops! We could not locate your form.

Every small business wants a brand – but what, exactly does that mean? More than just a logo, a brand is a consistent story that runs through every aspect of your business. Use the same tools Chris learned working at big agencies to help your company stand out! The following topics will be covered in this class:

• The discovery process
• Crafting a creative brief
• What to do if you are your own client
• Mood Boards
• Research
• Creating a brand guideline document

Sign Up Now

Chris Ford started her love affair with branding while working under Ron Taft and Art Bradshaw at NextLeft. While there, she worked on brands ranging from Gateway Computers to the Wynn Hotel Group. In her freelance life she has created brands for Digital Scrapbooking magazine, Tara Whitney Photography and Melinda Roberts of TheMommyBlog.net.

Everyone loves a cool blog header – but making one can be tricky. Let Chris share some of her favorite tips, tricks, and resources for creating compelling blog headers using Photoshop. Some of the topics covered in this class will include:

• Illustration and photography resources
• Making stock illustration your own
• Treasure troves of typography
• My favorite “quick and dirty” Photoshop tricks
• Creating your own library of tools

Sign Up Now

Chris Ford has been working with Photoshop since before it had layers. With 15 years experience pushing pixels around, she’s got a lot of tricks up her sleeve that she’ll be sharing in this class – you don’t want to miss it!