The Inspiration

The Final Product

Space Station

At any given moment, I have my mouse & keyboard, cell phone, iPod and a flash drive all plugged into my USB ports. Blue Lounge has a very nice organizer with internal coiling pins to hide the mess.

Dornob

Although this idea isn’t that great for a dual monitor setup, I would make the sacrifice for the aesthetics alone.

Logitech Notebook Kit

I really like the simplicity of this notebook kit by Logitech. It’s minimal and attractive, and would go great with my laptop!

QLOCKTWO

This is by far one the coolest clocks I’ve ever seen. If only I could afford it, it would definitely be in my home office.

There are hundreds of social media sites out there, I only created what I thought was most popular. If you have a suggestion for a new icon let me know in the comments and I will add it to the set!

Download Social Media Icons

The site was forbes.com and my complaint is with information overload that leads to messy layout. There are so many ads, widgets, buttons, and other informational pieces that do not relate to the story that I can’t focus on the main content I want to visit. I understand that news sites are driven by revenue but that factor should never overpower basic site layout principles and standard user experience guidelines.

I can no longer remember the article I was going to read on Forbes, or who even directed me to it, because as soon as the page came up I left. This is a slightly bias choice on my part; if a site layout is poor I assume the content follows suit and don’t spend any time there.

The first thing I noticed was a big sign up form on the right hand side of the site. The far right column has dominant colors which makes it stand out more so my eyes immediately went there. I began to scroll down, still “admiring” the right sidebar of the site and was greeted with an ad for “Executive Woman Attache”. That’s two strikes for the price of one; I hate seeing ads in the first place that distract from the main content, and I’m not a woman.

There is a another side bar just to the left, which has poorly design flash ad. The background is around 500px high while the content is only 200px, and centered vertically. The padding for the containing element could use some adjusting as well.

There is yet one more “call to action” section in the main post content, prompting you get your news via email. The form has poorly designed elements that do not fit the rest of the site; such as colors, buttons, and font-sizes.

This whole theme continues throughout the article with sporadic ads, images, and videos that disrupt the flow of the text. Much of this site could be improved with a bit of CSS. Overall it seems that a list of features was made for this site and just thrown in without thought.

Here are some images of poorly put together news websites:

1. forbes.com

2. ABC News

3. Fox News

So the big question now is, does anyone have a layout that isn’t so intrusive? They all seem to follow the trends…. The answer is yes, CNN recently launched a redesign of their site. The overall design is inviting and easy to navigate. The content of the site is not cluttered with ads or forms, so it’s easy to read. My only real complaint is that I would not have centered the logo, but that’s just a designer’s opinion.

I can only hope that other news sites follow in CNN’s footsteps. Maybe then I’ll be happier reading my news online, until then it’s all just what I hear on twitter.

I’m sure this is a debatable topic as I was pretty harsh and bias in my views. But this is certainly a big reason I don’t currently use them.

Step 1: Setting up the canvas

Let’s start by creating a new 500×300 canvas. Set the resolution to 72 px/in, and color mode to RBG color, 8 bit.

Next we’ll apply a gradient to our background layer #AD0404 to #870404.

Step 2: Add some snow

Create a new layer called “Snow” (Ctrl + Shift + N). Use a soft round brush and set the size somewhere around 15px.

In your brush settings pallet apply Scattering and Other Dynamics as follows, be sure your foreground color is set to white.

Step 3: Add a lens flare

Add a new layer called “flare” and fill it in black (Ctrl + Backspace). Then go to Filter>Render>Lens Flare and set the brightness to 50%, and select 50-300mm Zoom. Click the bottom right corner of the Flare Center section and click OK.

Now set the blending options of this layer to Screen. Duplicate this layer (Ctrl + J) and go to Edit>Transform>Flip Vertical. Then move the new image up and to the right a few pixels.

The lens flare adds some lighting effects across the entire image, which I chose to get rid of. Just use the Erase tool as you see fit and get rid of the parts you don’t want.

Step 4: Add the tree

Grab this Christmas brush set http://flina.deviantart.com/art/Christmas-brushes-103012446 and select the “tree1″ brush and set the size to 400px. Place the tree on top of our snow/lens flare layers. Then go to the blending options and set the Color Overlay to #870404, and Outer Glow to white.

Step 5: Adding icons

Now we’ll add a couple of Christmas icons. I used a Santa Clause and a Christmas present. Resize them to your liking, be sure the present is over the Santa Clause and let’s give it a drop shadow to make it stand out a little bit.

Step 6: Adding the text

I chose a nice script font from Font Squirrel called Beautiful-ES. I chose a slightly smaller font size for “Merry” and positioned the text in the upper left corner of the canvas.

Step 7: Adding your own touch

Now we have a template for a nice E Card. Add your message in the middle of canvas and send it off!

You can download the final .psd file here.

1. How did you get started with web design?

I got started with web design when I was about 12 years old (1996-ish). My dad bought me a book about HTML I had found in some thrift store. Web design seemed like a natural fit for me because I was able to combine my passion for art and my love for computers & the Internet.

In college, I majored in Graphic Design. I think we had one class about building websites (not web design), but the curriculum was entirely focused on traditional print media. As a result, I spent some of my early professional years working in more traditional Graphic Design jobs. So, I guess my real web design career began in 2007.

2. What was the first site you designed?

Wow. That’s really hard to think back 13 years, but I think I built a site about golf (one of my other passions as a kid). This was ‘96 or ‘97, so it was obviously filled with animated GIFs. I think I may have even had a .midi track playing in the background. I built most of my sites back then on Geocities, so they’ve all been lost to the ages. Rest in peace.

3. How do you break designer’s block?

Usually I just try to take a break. After focusing on a design for a long time, it’s pretty easy to develop that creative fatigue. I’ll either go read some blogs, or blow up some stuff (if my Xbox is nearby). Anything to get other parts of my brain working. Once, I even resorted to doing math problems.

4. How does the ‘real world’ inspire your web creations?

I guess that could happen any number of ways. I suppose most of the ‘real world’ inspiration is people. Either being inspired by the things they create, or by problems they may have. As designers, our goal should be to make the world a better place. This is why you see so much focus on accessibility in web design these days, designers are tackling ‘real world’ issues to make someone else’s life better. But something as simple as one’s annoyance to filling out forms, or replying to emails, or editing web content… those can be inspiration for my creations.

5. You are very active in the design community, which social media site has been the best tool for you?

Twitter, without question. I’ve met so many wonderful people through Twitter. The “design community” on Twitter is much larger than it was when I joined over a year ago. Honestly, it’s getting tough to keep track of. It’s flourishing, and that’s so cool to see. The group of people involved have always been kind and willing to share time and expertise. And apart from being just a giant link-swap/Q&A, it’s really a great place to cultivate relationships. I’m now friends with tons of great people who I would’ve never even known existed if it weren’t for Twitter.

6. Who do you admire most in the design community?

I’ll probably always answer that question the same way: Jeffery Zeldman. He’s done so much for the entire industry of web design, and he continues to give after all these years. And of course, I’ve always looked up to the other greats: Jason Santa Maria, Cameron Moll, Jeff Veen, Dan Cederholm, Andy Clarke… the list goes on and on. They’re like the pro baseball players I wished I could grow up to be (mine was Ryne Sandberg from the Chicago Cubs ‘82 – ‘97).
There are so many people to admire just that I’ve met through Twitter. People like Aaron Irizarry, who I’ve watched absolutely transform his blog into a fountain of great content, with heart and real effort. Or Chad Engle, who I’ve seen work so hard to construct DCTH, one of the biggest weekly online gatherings of web designers worldwide.

There are a lot of people out there who can be admired.

7. What apps do you use when designing a site?

I use Illustrator and Photoshop to create my graphics still, but I’ve made a switch to doing all my designing in the browser. I use TextMate for my HTML/CSS/JS/PHP.

8. What is your favorite platform/language to develop in?

My followers on Twitter could probably tell you that I have a passionate love affair with jQuery on a startling frequency. Once, I almost even proposed to jQuery. I really like writing code. I love the power and flexibility of CSS. And though I’m still learning, I’m starting to really enjoy PHP as well. Learning Ruby on Rails is a far-off task for me, but my limited dealings with it has it shining in a very favorable light. But seriously, jQuery FTW.

9. A question I see floating around all the time – Music while you work, is it good or bad?

I couldn’t live without music. It is a definite necessity while I work.

10. If you had to give up design, what you choose for a career?

Probably culinary arts or agriculture, specifically farming. Learning how to farm, and becoming a farmer has kinda been my retirement plan for awhile. Food, all the way from farm to the table, has been a long-time passion of mine. Something that I know I’d be able to find pleasure in nearly as much as web design.

One Day For Human Rights

Velvet Ant

Smashing Magazine

Soh Tanaka

PSD Tuts

The Breakdown

Let’s first break down what using <?php wp_list_pages(‘&title_li=’); ?> will spit out in your HTML. This function embeds each page link within a list item of an unordered list. The link for each sub page is then put into a new unordered list witin the initial list item of the parent page. Below is an example of the HTML generated for 1 parent page with 2 child pages.

<ul>
	<li>
      <a href="#">Page 1</a>
<ul>
	<li><a href="#">P1 Sub Page 1</a></li>
	<li><a href="#">P1 Sub Page 2</a></li>
</ul>
</li>
</ul>

For further documentation of this function, see http://codex.wordpress.org/Template_Tags/wp_list_pages.

Putting It To Use

To impliment this into your own theme, you will first want to call the function. I recommend putting this within a <div> with a specified id, to better control the CSS.

HTML:

<div id="main-nav"></div>

Then style the <ul> and <li> elements by nexting them within #main-nav.

CSS:

#main-nav{
   overflow: hidden;
}
#main-nav ul{
   list-style-type: none;
}
#main-nav li{
   float:left;
}
#main-nav li a{
   color:#4aa1ff;
   text-decoration:none;
}
#main-nav li a:hover{
   color:#333333;
}

At this point, every page and subpage will have the same styles. Let’s take this a step further by adding some CSS for those sub pages.

#main-nav li li a{
   color:#fb7200;
}
#main-nav li li a:hover{
   color:#333333;
}

If we created children in our sub pages, we could simply apply the same logic in our CSS and add another section #main-nav li li li a{} with different styles from the initial 2.

The End Result

Step 1: The Basics

Let’s keep it really simple to start with. Open your favorite HTML editor (mine is Dreamweaver) and create a new HTML page. In the <body> tags put the following line of code and save this file as index.html.

<input type="text" />
<input type="submit" />

When you preview this page you should see something like this:

Step 2: Reset Default Styles

So now that we have a plain old input box and submit button, let’s make it pretty. Start by creating your searchbox & button as an image and saving as a .PNG. Here is the image I’ve created for my form:

The width doesn’t matter, as we are applying this as a background image.

Now let’s go back to that initial markup we put in the HTML page and apply a class to each piece. Also set the value=”" so that there is no text in the submit button.

<input class="search-text" type="text" />
<input class="search-btn" type="submit" value="" />

The next step is writing the CSS. In between your <head> tags let’s create our CSS and take away the default styles of the input fields:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    }

Now you should see something like this:

Step 3: Expanding The CSS

Now we need our CSS to tell our form how big to be, in order to match the size of our images.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
     }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    }

Let’s refresh our page and see what we have now.

Step 4: Fixing The Layout

We’re almost done! We now need to get our submit button position correctly with our text input. We’ll add a position:absolute to the search-btn class:

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    }

Step 5: The Final Touches

Now try typing in the input field. Not terrible, but the text is a bit off. So let’s add a font-size and text indent to the search-text class of our CSS. We’ll also define the cursor on the search-btn since we’ve reset the defaults and it currently doesn’t change.

.search-text{
    background:url(search-back.png) 0 0 no-repeat;
    border:0;
    height:24px;
    width:200px;
    font-size:18px;
    text-indent:5px;
    }
.search-btn{
    background:url(search-back.png) -216px 0 no-repeat;
    border:0;
    height:24px;
    width:34px;
    position:absolute;
    cursor:pointer;
    }

Step 6: Applying To Wordpress

I always have an easier time designing WordPress parts like this as basic pages outside of my theme. When I’m done I then apply the changes to my theme.

In your WordPress theme, open searchform.php and add the classes to <input type=”text” > and <input type=”" > (these may vary slightly depending on the theme, but it should be pretty straight forward). Some themes do not have searchform.php, and if that is the case simply create one on your own with the values we created in index.html. Next apply your CSS changes, and be sure to copy your image to the appropriate folder!

That’s A Wrap!

I hope you found this tutorial helpful. Take it to the max and please share what you’ve made! Feel free to download the HTML/CSS code for the search form, as well as the .PNG & .PSD files.

styleSearchTutorial

1. What brought you to the wonderful world of web design?

By the time I graduated from college, I was 100% positive that I wanted to focus on web design.

Ever since I can remember, I’ve always held an interest for art and design. I was lucky enough to have been exposed to computers since the age of three, when my father got his first computer, a TRS-80.

Little did I know, but this early exposure to computers would lead to my current career passion – computer aided design… specifically web design.

I majored in graphic design in college, where at this point the internet was nothing more than a hobby for me. My career goal at that time was creating designs for print, such as advertisements, corporate identity, brochures, etc.

As I dabbled more in the emerging technology of the internet – which started with Compuserve and our local Freenet / BBS back in high school – my interest in the web grew tremendously. By the time I graduated from college, I was 100% positive that I wanted to focus on web design.

2. What was the first site you designed?

The first site I ever designed was my own – hosted on a free Geocities account (in the “Paris” and “SoHo” neighborhoods) way back in high school.

It was a personal site called “Innovative Designs” with a basic portfolio of my acrylic paintings and other fine art. It would be a blast in the past to get a sneak peek of that old site – I’d be embarrassed to show it off now though, LOL.

3. How do you break designer’s block?

My first step in breaking designers block is usually to take a break. Either by working on another project, or taking a break from work entirely. Sometimes you realize you just have to sleep on it and start again the next day.

If I don’t have the luxury of time, though, I’ll go through the CSS design galleries for inspiration. I’ll often find a design (or ten!) that spark my interest and get the creative juices flowing again. I also frequently go to the stock photo sites – often times I’ll find the perfect photo for a web site, which is all I need to start sparking new ideas.

4. How does the ‘real world’ inspire your web creations?

For the most part I’m inspired online – through the work of other great designers that inspire me to improve my own design and development skills. But real world experience helps a great deal, as well. Learning from past successes or mistakes, and knowing what does or doesn’t work well in a design all plays a role.

Taking real life into account is also important, as far as the fact that web sites should be designed for the people who will be visiting them (not necessarily for the site owner). Having real world experience of knowing what it’s like to be a college student, work in a corporate environment, be a parent, etc. helps you bring a bit of personality to a design where you need to “speak” to the target audience.

Piecing together bits and pieces from things I’ve gone through myself, will often play a role in a design – even if it is sub-conscious.

5. You are very active in the design community, which social media site has been the best tool for you?

First off, the design community is such a helpful group!

Hands down, Twitter has been the best social media tool for growing my business. I started out on Twitter just out of curiosity and for fun, but it’s turned into an invaluable networking tool.

First off, the design community is such a helpful group! I’m now following a ton of designers and developers, and I see on a daily basis how supportive everyone is of each other.

I’ve run into great resources via tweets and retweets, for example. If I ever have a question – whether related to a specific development issue, or some aspect of running your own business, etc. I can always count on more than a few people to respond with their own input. I’ve also had several inquiries for work come through contacts on twitter – I think just from being “out there” and people being exposed to your work, or liking you as a person helps, too.

It does takes work – it’s a give and take relationship – but Twitter is definitely a fantastic tool and the one I recommend most if someone wanted to use just one social networking site.

6. Who do you admire most in the design community?

Tough question – you might get me in trouble here, as I don’t want to leave anyone out, LOL. I do love to follow Graham Smith, Calvin Lee and Adelle Charles on Twitter.

I’m always amazed by how they are able to multi-task by designing and developing work for clients, maintaining their own very active blogs, and managing their own side projects, all while being very active on in the design community.

I’m working on my time management and increasing my blogging frequency this year – but I’m always amazed at how much effort these designers put forth in so many areas. Definitely an inspiration!

7. What apps do you use when designing a site?

I primarily use Adobe Photoshop and Adobe Dreamweaver. I complete the entire design (from brainstorming and mockups to final design) in Photoshop, and develop the functional web site in Dreamweaver. The WYSIWYG view is quite helpful, but I find more and more that I’m mostly working in the code-view.

Although not an application, I also always use the W3C XHTML and CSS validation tools – these are crucial in ensuring that you have valid / standards compliant code. Often times plugins or ad codes that clients want to use will invalidate the code, but I like to be sure the basic site validates.

8. What is your favorite platform/language to develop with?

While I originally focused on developing static XHTML / CSS web sites, my focus is now shifting towards custom WordPress theme design and development.

Each time I develop a new WordPress driven web site, I am still amazed by just how much you can do with it. WordPress is definitely more than “just” a blogging platform!

There are many things I’ve wanted to do with WordPress for my own needs, or requests I’ve received by clients – so far I’ve been able to meet almost all of those requests, either with customization of common WordPress tags, or from the thousands of plugins that are readily available.

9. A question I see floating around all the time – Music while you work, is it good or bad?

I definitely think that music while you work is a good thing! Especially when I’m in the design and development phases of a project, you can bet there’s some music blasting. I do tend to shut everything off if I am blogging or writing proposals, etc. – but when I want to be creative, I definitely find that music helps.

My last.fm account clearly shows that my favorite music to listen to is anything by Maynard James Keenan – lead signer of Tool, A Perfect Circle and Puscifer. I listen to a lot of Nine Inch Nails, too.

10. If you had to give up design, what you choose for a career?

You know that’s something I’ve never even thought of before, and quite honestly don’t know how to answer!

I’ve always been interested in design in some form or another, so if I ever had to give this up for some reason, I think I’d be completely lost! One thing for certain, my replacement job would definitely have to involve computers. Exactly what it would be, though is hard to say….