Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

April 25 2011

07:00

March 18 2011

14:00

Drag and Drop WordPress Layout With Platform Pro

Building and even slightly altering WordPress themes can be a real hassle. Sure, if you’re a professional web developer with a little PHP knowledge, you can go pretty far, but what if you have little to no understanding of how a WordPress theme is built? You could buy a book or watch hours of video tutorials until you’re an expert on WordPress, but wouldn’t it be nice if you could skip all this and jump into building your own theme today?

Today we’re going to take a look at an impressively innovative product that allows you to use the simplicity of a drag and drop interface and basic forms to completely customize a WordPress site. The product is called Platform Pro and you’ve simply got to see it.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Meet Platform Pro

screenshot

Platform Pro is essentially just a WordPress theme, but it’s likely different than any WordPress theme you’ve ever used before. Instead of just providing a few different color options or layouts, Platform puts you in the driver’s seat. Whether you’re a web developer and like to code by hand or someone who doesn’t even know what CSS stands for, you’ll find that Platform has a lot to offer you.

I stumbled across the theme completely by accident the other day and asked the good folks at PageLines to set me up a test page. It turns out the have already have a public test page set up for anyone to try totally free. After you get the gist of how everything works here, head over to that link to try the theme out for yourself.

Getting Started

Below is roughly the page we’ll be starting with today (I’ve trimmed a bit so it’s not too huge). As you can see, it’s excellent for a blank slate. The typography and layout are fairly nice as is, but generic enough that we won’t mind digging in and changing it all around.

Again, this is close to what you get straight out of the box with zero work thus far:

screenshot

In the image above we can see a header and navigation area, some post previews, a sidebar, a footer, etc. Each of these has a number of options for customization so if you don’t like anything at this point, don’t worry, you can change it!

The Settings Panel

Within the typical WordPress admin panel, you’ll find a module for Platform Pro. This is where you will handle most, but not all, of the changes to your WordPress theme. There is a ton of stuff in here so you might feel a bit overwhelmed at first, but honestly, just about every setting you’ll find is straightforward and easy to understand.

screenshot

We definitely won’t have time to go through every setting here but we’ll kick the tires sufficiently enough that you’ll get a good feel for what’s possible.

Modifying the Layout

As a designer, the first thing I want to know is how I can play with the layout. Clicking on the Layout Editor tab of the settings panel will bring up a number of options to choose from, both basic and advanced.

Your first choice is to choose between one of six basic layouts. Each of these is a mixture of a content area and either zero, one or two sidebar options.

screenshot

Hate that sidebar seen in the initial site preview above? Ditch it by selecting the icon with only a main content section. Then apply your settings and take a look at your page to see the changes.

screenshot

Can’t get enough sidebars and widgets? Choose an option with two sidebars and you get the layout seen in the image below.

screenshot

Going Further

If you want even more control over the layout, scroll down to find the panel shown below. Here you can drag the dividers and use the fields to determine the width of the overall page and each column.

screenshot

So let’s say I think my sidebar is far too wide. All I have to do to fix it is slide the little divider over to the right until my dimensions are 700px for the main column and 260px for the sidebar.

screenshot

Once I save these layout settings and take a look at my page, here is the result:

screenshot

Changing the Typography

Platform gives you a lot of freedom over the text on your page. Navigate to the typography tab and you’ll see options for changing the fonts for the primary font, secondary font, headers and even input areas.

screenshot

One thing that really surprised me is the huge selection of fonts that you can choose from with this theme. Pagelines has included several standard web fonts and even a good portion of the Google Font Library to really push your creative freedom to the limit (there are also custom Cufon options).

When you’re assigning a font to a specific area, you can choose from a number of standard styling options that you would normally have to write a bunch of CSS to manipulate. If you want to include your own CSS, just click on the “Advanced” button.

screenshot

In the end I decided to go with a modern feel so I chose a couple of nice sans-serif fonts for the page: Lato for the headers and Droid Sans for the body.

screenshot

Background and Colors

Under the Design Control tab you’ll find even more customization options. At the top of this tab you’ll find more interesting layout options that affect how a background image is applied. For instance, you can make a background image flood the whole site, or just affect a “canvas” area outside of the content. I chose the latter to keep things clean, you’ll see how this works next.

To add a background image, simply scroll down to the section seen below and upload a JPG. You have full freedom over how the image is applied. You can tile it or position it in a specific spot using percents.

screenshot

I uploaded a subtle dark gray texture to add come contrast to my page. Again, this could’ve flooded the entire background but I chose to have it flank the content.

screenshot

Changing Colors

In the same tab as the settings above you can view and modify the color settings for every element on your site. This is as easy as finding the element in a list and changing the color values.

screenshot

For instance, changing the primary background color affects the footer element. Just pick a color in Photoshop, copy the values and hit save to see the changes.

screenshot

Adding Sections

Up to this point we’ve really just made minor tweaks to the site. It’s still fairly close to what we started with and not all that exciting. Let’s change this by adding some new sections.

Under the Template Setup tab you’ll find a control that allows you to drag and drop new sections onto your site. The left side contains the sections that are currently active and the right side sections that are available to add.

screenshot

Let’s change our setup by adding an awesome “Featured” slider at the top of the page. To accomplish this, simply drag the “PageLines Features” box under the “Navigation” box in the header.

screenshot

With this quick addition, suddenly our site is looking far better than when we started. Now we have a super fancy image slider at the top with several fully-customizable spots for images, text and even video. All without a single line of code!

screenshot

There are several cool default sections that you play with that really boost the awesome factor of your site. Below I threw in a Flickr image carousel near the bottom of the page. Other sections allow you to add feature boxes, banners, links, breadcrumb navigation and more.

screenshot

Finishing Up

With just a bit more tweaking, our original boring blog is transformed into a sleek and modern website with lots of advanced features. The result below would probably take you around thirty minutes of work once you got used to how the system works and more like ten to fifteen minutes once you really knew your way around.

screenshot

Closing Thoughts: Should You Try Platform Pro?

Even after that dramatic change, I’ve still just scratched the surface of what Platform Pro can do. We didn’t even discuss the custom HTML options, post thumbnails, social media integration, pre-configured plugins or a whole host of other things that I haven’t even discovered yet!

Honestly, I’m blown away by this product and think that it could really take the pain out of WordPress customization for a lot of people. Whether you’re a designer looking for flexible a flexible system to set your clients up with or just a small business owner who wants to get more out of WordPress, Platform Pro is a steal for $95.00 (read about the free version here). There are tons of $50 and $30 themes on the market, but they don’t offer a fifth of the freedom that you’re going to get with Platform.

To learn more, head over to the Pagelines website where you can see a comprehensive feature list and even a video of the theme in action. Leave a comment below and let us know if you’ve tried Platform and what you think. Also be sure to leave a link to any similar products that you’ve found for making WordPress more user friendly!

Tags: Layouts
Sponsored post
soup-sponsored
05:36
Reposted bySchrammelhammelMrCoffeinmybetterworldkonikonikonikonikoniambassadorofdumbgroeschtlNaitliszpikkumyygittimmoe

March 16 2011

17:44

10 Tips for Troubleshooting a Lackluster Design

One of the biggest problems that designers struggle with is how to improve a design that didn’t quite hit the mark. Sometimes we’re on our game and can bust out a beautiful design in minutes, other times we struggle to complete something that should be simple.

Today’s post is a checklist that you can bookmark and refer back to for those times when you need a fresh perspective. Browse through the list for inspiration on how to improve a design that’s lacking in an area that you can’t quite identify.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

1. Add Contrast

screenshot

One of the strongest ways to make any design more interesting is to introduce some contrast. Our eyes are drawn to areas of extreme difference and the proper wielding of this knowledge can lead to stunning designs.

We’ve discussed this before on Design Shack but here’s a quick refresher. Contrast is typically applied using any or all of three different methods. The first is color. Color contrast is easy to understand, but not always easy to execute. Use you color wheel theory here to make sure you’re adding contrast, not conflict.

Some of the highest contrast combinations possible are shown in the image above: black, white and yellow. Both white and yellow contrast beautifully with black and are quite often used together for selective emphasis.

The other two ways to add contrast are related: size and boldness. When too many objects on the page are the same size, it can make for a bad case of visual redundancy. This applies especially to typography. Make sure your headlines (or any other areas that you want to stand out) are significantly bigger and/or bolder than the rest of the items on the page.

Practical Application

Go through your design and look for areas that stand out visually. Are these the areas you want getting the most attention? If not, use selective contrast to liven up the page and add interest to the elements that deserve it.

2. Do Something Unexpected

screenshot

You instinctively know how to really get someone’s attention: you surprise them. This can be applied to web design in both good and evil ways. Having a loud music player surprise your visitors is evil. Doing something graphically pleasant but untraditional is good.

As an example, consider the image above. The name of the graphic design studio sort of sinks into the ground. I’m not entirely sure why the designer did this, but it certainly makes me spend a few extra seconds looking at the page. The designer hasn’t gone all out to sneak up on you or deliver a strong punchline, he/she simply put a twist on what you expect to see here.

Little touches like this allow you to really personalize a site with your own particular brand of creativity. Those touches go a long way towards adding that finished feeling that your design may currently be lacking.

Practical Application

Try to identify the most boring, run of the mill aspects of your design. What changes can you make to these areas that aren’t typical of what someone would expect? Remember, it’s not about adding confusion but rather infusing interest!

3. Simplify, Simplify, Simplify

screenshot

If I could only say one word to designers who consistently produce lackluster designs, it would be “simplify”. Too often we think the solution to good design is adding more. More icons, more text, more photos. Sometimes these things can genuinely help but more often designers are simply trying too hard.

When you over-think a layout you cram so much into it that it loses its effectiveness. As a viewer, there’s only so much that I’m able to and/or willing to process. The less content you cram into a single page the less work I feel like I have to do to view it.

The site shown above is a perfect example. This page is gorgeous and effective. The main goal is to communicate that Paul is a graphic designer with an emphasis in typography, the design definitely communicates this loud and clear!

Now contrast this with the website below. These guys probably aren’t bad designers, but the page that they’ve created for their design business is super busy. The result is a cluttered look with no clear emphasis. Remember, when everything on the page screams out for attention, nothing gets it.

screenshot

Practical Application

Take a good hard look at your design and identify the essential elements. You might be tempted to instead hunt for the non-essential elements but that will lead to a much less dramatic change. Find the items that absolutely must be present for the page to have any meaning and usefulness. Now strip out everything else. Throw it all out and move it to other pages or kill it completely.

Now give your page a new, simpler layout and see if the result doesn’t look better than when you started. If you’ve gone overboard you can always start to reintroduce a few of the deleted elements slowly while maintaining the strong new design that you’ve created. Be careful though, it’s a slippery slope and you might just end up back where you started!

4. Add Repetition

screenshot

Repetition is a really tricky concept that few designers grasp properly. It starts off simply enough: use the same few fonts and colors throughout your design for a consistent look. However, good implementation of repetition goes far beyond this.

The best way to learn is through identifying repetition in the designs of others. Consider the example above, can you spot the repetition? Check out the Facebook icon in the lower left corner. Did this have to mirror the shape of the floating island element? Certainly not, a normal Facebook icon would’ve worked just fine. However, this designer went the extra mile by inserting a subtle nod back to the main graphic.

Notice that the designer didn’t go overboard with this idea. There aren’t twenty little floating island icons scattered throughout the page, just one.

Practical Application

Take a look at your design and try to identify something unique and interesting. It can be anything from a shape to a color. Now think about how you can repeat this element in a clever way.

Take a bold color like red and insert it only in a few places that you want to draw attention to. Take the subject of a photograph, cut it out and place it elsewhere on the page. Write one word of your headline in a script and then repeat this trick in one or two other places. These are just a few ideas to get your brain started in the right direction, repetition can be anything you want it to be!

5. Break Up Your Content with Lines

screenshot

This is a really weird little trick that can go a long way. Sometimes your design is filled with awkward whitespace. Other times, you don’t have enough space and need a way to keep things closely crammed in while remaining visually distinct.

These and a million other problems can be solved with the simplest of design elements: a line. Sounds too good to be true right? Well check out the sites both above and below this paragraph and how they use lines to both organize and add interest to their content.

screenshot

As with many of these tips, this one is really easy to take too far. Wield lines with intention and reserve. Make sure they’re actually improving your design rather than simply adding clutter.

Practical Application

If you want to learn all about how to successfully implement lines in your design, check out our article dedicated to the topic! You’ll find all kinds of ideas and examples for spicing up your designs with a few simple strokes.

6. Make it Dynamic

screenshot

Remember that web design isn’t all about how everything looks! It’s about interaction with the user. A plain, static page can often feel boring, even if it’s fairly attractive on the surface.

Fortunately, this is one of the easiest problems to solve on the web. Add in an image slider, a slideshow, some unique hover effects or perhaps even a subtle animation.

The site shown above has an awesome little hover effect on the ribbons. When you mouse over, the mid-section raises up while the sides stick out further, giving it a really nice 3D effect. Also be sure to visit the site below and keep a close eye on that colorful logo. It has an animation that is so subtle that you can see the page a dozen times and never notice, but when you do you can’t stop looking!

screenshot

Practical Application

Does your site seem dead? The web is far too rich of a medium to not take advantage of amazing tools like dynamic CSS, jQuery and MooTools to add a little life to a boring page. You don’t have to go crazy, just be sure to leverage your available resources in a way that users find engaging.

7. Add Some Character

screenshot

When you first see the site above, you might wonder what on Earth possessed someone to stick a mustache on a bar graph! It’s a bit ridiculous isn’t it?

However, I think it’s a fantastic bit of design that makes me smile every time I see it. Why? Because bar graphs suck. Data is boring and lifeless and presenting it in an interesting way is always a challenge. This designer was tasked with making a website speed check feel friendly, what better way is there to accomplish this than to anthropomorphize a bar graph!?

Adding a human element is a great way to make any site feel more welcoming. If you’re a master illustrator, great, whip up a mascot or friendly character. However, even if you can’t draw you can easily implement this trick. The mustache above is no amazing feat of illustration, but it gets the job done!

Practical Application

Ask yourself what aspects of your design seem particularly boring or technical. Will non-techies identify with these areas in a meaningful way? Try introducing some humanity into the picture and see if that helps. Use smiles, faces, etc. to reduce the level of intimidation.

Bring It to Life With Texture

screenshot

It’s often a good idea to begin your designs in a very basic way. Don’t get too caught up on details in the initial stages, instead focus on what your content will be and how to organize it in a usable fashion.

Also make sure you’ve nailed down your color scheme. Use solid colors in your comps until everything looks pretty good without any extra superfluous gradients or textures. Then, if you think that something is still lacking, try introducing some interesting textures to add a little life to your design.

Keep in mind that texture doesn’t have to be relegated to a simple background, check out how the site below uses a layered texture effect in the header to create something that’s really attractive.

screenshot

Practical Application

This tip works in two ways. First, if you haven’t yet used any texture, think about how you can incorporate it while maintaining the integrity of the colors and layout that you currently have. Use texture to reinforce an already strong design, not as a band-aid to poor design.

Secondly, if you’ve already used significant amounts of texture, try stripping it all out and getting a feel for the site with just solid colors. Then gradually reintroduce texture while being extremely selective about where it is applied.

9. Take a Break

screenshot

Sometimes you just get stuck in a mental rut. No matter how much you try to climb out of it, you just keep recycling the same ideas and making the same mistakes.

If the suggestions above don’t help, try stepping away from the project for a while. Take a break, go for a walk or even work on another project for a while, the longer the better. If you have the time to spend an entire day focusing on something else, coming back after that extended break will give you a fresh perspective that is often just what you need to step back and identify the problematic areas.

Unfortunately, most projects that we work on don’t have enough lead time to waste a day skipping through the lilies of life without incurring the wrath of an angry client or the dread of a hard deadline. In these circumstances, short breaks are all that you’re going to get.

There’s actually an entire productivity system devoted to short breaks that lends itself perfectly to creative professions such as design. The Pomodoro method utilizes periods of uninterrupted work followed by brief breaks. Since creativity tends to come in bursts, trying this for a day might provide the perfect remedy for your lackluster design.

Practical Application

To learn how to apply these principles effectively in your own workflow, check out our article, How to Cut the Crap and Actually Be Productive as a Creative Person. It’s a straightforward and honest discussion about why designers struggle so much with the balance between creativity and productivity, why todo lists don’t work and how you can successfully get past it all and get something done!

10. Start Over

screenshot

After spending hours pursuing an idea, no one wants to hear that they need to go back to the drawing board. As designers, we tend to form emotional connections with our creations. It’s a perfectly natural reaction, but you should be aware that this tendency can really get in the way of moving on and improving upon our initial thoughts.

The bad news is that sometimes a design simply can’t be saved. Designers too often spend three hours tweaking a poor design when it would’ve taken them ninety minutes to start over from scratch and come up with something better.

Part of maturing in your skill as a designer is simply knowing when you’re wrong and pressing forward in a new direction. Sure, it looked great in your head but when it came out in Photoshop it looked like crap. Don’t whine and mope, hit Command+N and start fresh. Look around our design gallery for more great inspiration like that seen in this post and start over with something as completely different as you can come up with.

Practical Application

The most difficult part about this advice is knowing when you’re to that point where you need to start over. On the other hand, the most reassuring part is that your $1,200 iMac can in fact hold more than one PSD on its hard drive. Starting over doesn’t mean throwing away your original idea, it means saving it and filing it away so you have the option to come back to it later.

Sometimes you go through three more iterations only to realize that your first idea was indeed the best. Other times you move forward in another direction and stumble upon that old file months later and immediately see how those ideas could be incorporated successfully into your current project.

You might notice that this advice is a little two-faced. First, don’t be attached to your designs so much that you’re unwilling to scrap everything and start over from scratch. However, don’t be so unattached to your work that you throw away some genuinely promising concepts. Be a digital pack rat and never throw away a design that hasn’t yet reached its full potential. Create a folder of unfinished files and browse through it every few months for inspiration.

Conclusion

The point of this post is to get you to realize that, despite the fact that creative work is an unpredictable and abstract process, you can in fact apply logical steps towards reaching a solution in the event that you encounter problems.

The ten tips above should get your brain back in gear when you hit that creative wall and simply don’t know how to improve a design that needs an extra little boost. Some are hard and fast tricks that will only work a fraction of the time, others are steps that you should be taking on every design you produce. Experiment and find out which of these tips tends to work best for you. This is a great way to identify potential weaknesses that you need to improve upon.

Leave a comment below and let us know how you go about troubleshooting a lackluster design. Do you have any tricks up your sleeve for going that extra mile to refine your work or are you more prone to just scrap it all and start over? Let us know!

Tags: Layouts

March 14 2011

05:23

30 Fresh Examples of Single Page Websites

Single page websites have been a hot trend for a while now, and their popularity doesn’t seem to be losing any momentum. Going this route isn’t right for every project, but there are times when it’s fitting and just makes sense. For instance, when a site doesn’t have a lot of content, and you know the content won’t be growing very much in the future, it might makes sense to go with a single page design.

So what about your upcoming projects? Is taking this approach an option? If so, here are 30 fresh examples of single page websites to inspire you.

Solo: Single Page WordPress Theme

Arms

singlepages02

Mostly Serious

singlepages03

Aboard Entrepreneurship

singlepages04

Campaign Monitor is Hiring

singlepages05

Youzee

singlepages06

Jarad Johnson

singlepages07

Leased Lines

singlepages08

MMS

singlepages09

Kiera Lacey

singlepages10

Pub Aid

singlepages11

lrtrln.fr

singlepages12

Hyperbole Design

singlepages13

Bacon’s Self Storage

singlepages14

Alan Horne

singlepages15

Web Effectual

singlepages16

Orange 21

singlepages17

Radoslav Holan

singlepages18

Head2Heart

singlepages19

bacon & eggs

singlepages20

memelabs

singlepages21

ezorzi

singlepages22

Lue Hotel

singlepages23

Impero Design

singlepages24

Agnes Renie Krempp

singlepages25

Benjamin Chirlin

singlepages26

Killer Beach

singlepages27

Tangerine

singlepages28

Amber Miro

singlepages29

webzguru.net

singlepages30

Source:

One Page Love
Site Inspire

October 15 2010

18:29

Create a Stunning Wooden Website Template in Photoshop

Today we’re going to build an awesome website template in Photoshop utilizing a number of advanced techniques.

I’ll take you through the entire process in ten easy steps and provide you with a link to download the finished template. Let’s begin!


Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Preview & Download

Before we get started, here’s a look at what we’ll be building. You can download and use the PSD however you like, just be sure to give credit for the background as indicated in the article below.

Download Layered PSD

screenshot

Step 1: Create a New Document

First, create a new document in Photoshop. Make the canvas 1200 pixels wide by 1700 pixels tall. Don’t worry, our content won’t be anywhere near that wide, we just want to give ourselves plenty of room to work.

screenshot

To define the content area, draw a box that’s 960 pixels wide, center it horizontally in the canvas, then drag out guides to the left and right edge and delete the box. Your blank document should look something like the image above (color doesn’t matter at this point).

Step 2: Grab The Background Image

The inspiration for this design comes from an awesome free resource from Matthew Skiles. Matthew created a beautiful Wooden background texture and distributed it freely on Dribbble. Just remember that if you’re going to use this texture, you must provide a link back to Matthew.

screenshot

Grab the wooden texture from the link above and scale it down so that it is the same width as your PSD. It will only stretch about half way down the site vertically but that’s perfect at this point.

Step 3: Add Background Gradient

The wooden background looks great in Photoshop but it’s going to give us some trouble on the web because of the endless browser canvas. Our two basic options are to convert it to a seamless background pattern or gradient it out to a solid color.

In this case I chose the easy way out and decide to apply gradients to the left and right side of the background. To do this, create a new layer and set your foreground color to #421a0e or any other dark color that you like from the wooden image. Next set your gradient to go from this color to transparent and stretch the gradient from the lef side towards the middle, then repeat the gradient on the right side.

screenshot

This gives us a nice, smooth transition to a solid color. If we were coding this site, we would set this image to the background and set the background-color in CSS to #421a0e. No matter what screen size the viewer is on, the site’s background will look perfect.

Step 4: The Logo

The logo at the top of the site is simply text written out in Ballpark, an awesome free font designed by Mickey Rossi. Type out a word, make it black and set the fill to around 25%. Next, apply an inner shadow and a drop shadow to give it that letterpress look. Here are the settings that I used:

screenshot

Notice that the drop shadow is very different than the default settings. This is because we’re actually using drop shadow as a bit of a hack to create an outer bevel. Be sure to set the color to white and change the blending mode from Multiply (default) to Screen (works with white).

The trick to the inner shadow is to not overdo it. Go easy on the distance and make sure the opacity isn’t too dark. These settings should give you the awesome effect seen below:

screenshot

Next, type some subtext to go under the logo and apply the same effect. I used a simple Helvetica Bold and typed in all caps.

screenshot

Step 5: Add Some Lights

To add the lights at the top of the template we’ll use a super simple trick. Grab a nice soft white brush and click once on your canvas to create a fuzzy white dot. Now hit Command-T to use the Free Transform tool to stretch the dot out as seen below.

To get the skewed effect, hold Command-Shift-Option while while clicking and dragging on a corner control. This should move both corners equally.

screenshot

Once you’ve got a light shape that you like, duplicate the layer twice and spread the lights out. Then throw them all into a layer group and set the blending mode of the group to Overlay. You can also play around with adding an outer glow to each light to tweak the effect.

screenshot

Step 6: The Featured Content Box

Under the logo we’re going to create a big box that will serve as a placeholder for any content that you want to feature. This will be an awesome spot to include a jQuery image slider.

To start, simply draw out a rectangle and fill it with a gradient or a solid color, it really doesn’t matter since the idea is to place content over it. Make sure that you stay well within the 960 guides that you setup earlier.

screenshot

Next we’ll add one of those trendy curved shadows that are so popular in web design right now. To do this, add a typical drop shadow from the layer effects menu. Once you’ve applied the drop shadow, right-click on the little effect icon on the layer and select “Create Layer” near the bottom. As the name implies, this will turn the shadow effect into an actual shadow layer.

screenshot

Now use Warp Mode inside of Free Transform to curve the bottom edge of the shadow as shown in the image below.

screenshot

The overall effect makes the corners look like they curl up a bit while keeping the actual content box a standard shape that’s easy to fill with images in the development stage.

screenshot

Step 7: Navigation Area

Just above the featured content box, type out a few sample navigation options. I used Museo, a free font that can easily be used with @font-face in CSS.

screenshot

As you can see, the template is coming along nicely. We’ve finished the top portion and can move down to the next section.

screenshot

Step 8: Color Bar

Just below the featured content area should be about where the wood texture ends. Create a layer and fill from this portion down to the bottom with #3c1306. Then throw in some placeholder content. I chose a three column layout that repeated the box treatment from before and used Museo again for the headers.

screenshot

The trickiest thing here is setting the color bar apart from the wooden background. If you look closely in the image above, you can see that I stretched a gradient upwards from black to transparent so it looks like the box is casting a shadow on the wood. To add even more contrast here, I painted in some white with a big, soft brush, reduced the opacity of the white to 75% and set the blending mode to overlay. This is a great trick for lightening up dark areas of a texture.

Step 9: The Quote Box

Near the bottom of the color bar I included an inset box to hold a client quote. This is a three step process. First draw out a rounded rectangle that’s a little darker than the background color. Then apply the same inset technique that we used on the logo above (white drop shadow set to screen + inner shadow). Finally, drop in some text. I used an italic version of Georgia.

screenshot

Step 10: The Footer

To finish off the template, I brought down a little bit of the wooden texture and repeated many of the steps seen above. First, I added gradients on the side just as we did at the beginning. Then I added another shadow on the bottom of the color bar just like we did on the top. Finally, I repeated the same inset effect that we’ve used three times before to include some basic social media icons and the attribution link for the background texture.

screenshot

Conclusion

With those final touches you’re all finished! Among other things, we learned how to fade out a textured background to a solid color so it works on the web, how to create a letterpress effect in wood and apply it in a number of ways, how to create some awesome lighting illusions, and how to use the Overlay blending mode to lighten dark areas of a texture.

I hope you learned a lot from the tutorial, don’t forget to download the PSD! If you use it in a project, leave a link in the comments below so I can check it out (optional but appreciated).

Tags: Layouts

September 22 2010

15:15

August’s Fresh Photoshop Web Layout Tutorials

This roundup includes 19 Photoshop tutorials which deal with creating web layouts, fresh and inspirational resources from design community (August 2010).

View and Vote


May 10 2010

07:00

Designing an Infographic with HTML, CSS & jQuery

I’ve been wanting to get stuck into a creative infographic for quite some time, so recently I started work on a personal project that involved the design and build of a graphic to portray the stats and figures of Line25. To mix things up a little and to take it a step further, I decided to have a shot at building the whole infographic as a complete web page. Here’s a walkthrough of the project, showing how resources like Cufon and jQuery’s ScrollTo plugin were used to add some flair and interactivity to the design.

The concept

View the infographic

View the infographic

The design itself was put together in Adobe Illustrator using a bunch of Line25 stats. A limited colour palette was used to stay true to traditional infographic designs like airplane safety cards, with a couple of blues, greens and greys making up the scheme for the design. Large typography was one of the main ingredients, with League Gothic being the perfect fit with its tall and bold appearance. Charts, diagrams and icons also make up large portions of the design, all aiming to add interest to the otherwise boring facts and figures.

With the idea of building a web page out of the design in mind, I bundled in some large margins and gaps between the sections, the idea being that the jQuery ScrollTo plugin could make for some cool interactive scrolling. Swirly lines and gradients in these areas would add some visual flair as the browser window zooms past.

The basic webpage

Once the overall design concept was complete, the basic information was laid out in plain old HTML. Paragraphs of text and headings were used where possible to allow the majority of the design to be rendered by the browser, then it was all styled up with CSS one section at a time.

Intro section

Intro section preview

<div id="intro">
	<h1>The stats behind <span>Line25</span></h1>
	<p>The LINE25 web design blog by Chris Spooner is home to a range of posts that aim to provide ideas and inspiration to web creatives.
At just over one year old it’s already amassed a wealth of stats and figures. Sit back and take a look behind the scenes.</p>

	<p class="btn"><a href="#section1">Continue</a></p>
</div>
#intro {
	background: url(images/section-1.png) 0 485px no-repeat;
	padding: 0 0 1102px 0;
	margin: 0 0 0 100px;
}

	#intro h1 {
		font-size: 78px;
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 25px 0;
	}
		#intro h1 span {
			display: block; width: 625px; height: 188px; margin: 8px 0 0 0;
			background: url(images/line25.png);text-indent: -9999px;
		}

	#intro p {
		width: 850px;
		font-size: 28px; color: #c0d8f1;
	}
		#intro p.btn a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			float: right; margin: 160px -3px 0 0;
		}

The intro section consists of a short header, the Line25 logo, intro paragraph and the first button element. The background of the design was added as a background image to the intro <div>, and plenty of padding added to replicate the large portions of white space. The heading is configured in size and colour, with the <span> coming in handy for some image replacement as the Line25 logo.

Section one

Section one preview

<div id="section1">
	<h2 class="march2009">March 2009</h2>
	<h2 class="launched">Line25 is launched</h2>
	<p>On its first day, Line25 brought in 1,750 visitors. One year later in March 2010, the average daily visitor rate has grown to 5,572.</p>
	<img src="images/graph.png" alt="Graph displaying visitor count from March 2009 and March 2010" />

	<h2 class="average">On average each month, there are:</h2>

	<dl>
		<dt>9</dt>
		<dd>New posts</dd>

		<dt>299</dt>
		<dd>New comments</dd>

		<dt>4,378</dt>
		<dd>New subscribers</dd>

		<dt>39,205</dt>
		<dd>Visits</dd>

		<dt>82,072</dt>
		<dd>Pageviews</dd>
	</dl>
</div>
#section1 {
	margin: 0 0 0 100px;
}
	#section1 h2.launched {
		font-size: 154px;
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 15px 0;
	}
	#section1 h2.march2009 {
		width: 858px; height: 398px; margin: -21px 0 30px 0;
		background: url(images/march-2009.png); text-indent: -9999px;
	}
	#section1 p {
		width: 850px; margin: -25px 0 45px 0;
		font-size: 37px; line-height: 47px; color: #a7a9ac;
	}
	#section1 img {
		margin: 0 0 45px 0;
	} 

	#section1 h2.average {
		font-size: 82px;
		color: #c0d8f1;
		text-transform: uppercase;
		margin: 0 0 15px 0;
	}
	#section1 dl {
		overflow: hidden; margin: 0 0 100px 0;
	}
		#section1 dl dt {
			width: 360px; float: left; clear: left;
			font-size: 130px;
			color: #c1e6e9;
			text-transform: uppercase;
			text-align: right;
			margin: 0 0 5px 0;
		}
		#section1 dl dd {
			float: left;
			*float: none; /* Quick and dirty IE7 fix */
			font-size: 70px;
			color: #c0d8f1;
			text-transform: uppercase;
			margin: 43px 0 0 25px;
		}

After a short scroll section one begins with a simple graphic, followed by paragraph text which introduces the first chart. The large lists of facts and figures fits perfectly as a definition list, with the two pieces of related information being marked up as either <dt> or <dd>.

Section two

Section two background swirls

Section two chart

<div id="section2">
	<h2 class="total">In total <span>(as of May 2010)</span>, that's...</h2>
	<p class="btn total"><a href="#stats">Continue</a></p>
	[...]
	<h2 class="categories">The 126 posts are split into 4 categories:</h2>
	<img src="images/pie-chart.png" alt="Pie chart displaying posts per category" />

	<p class="btn continue"><a href="#user">Continue</a></p>
</div>
#section2 {
	background: #476079 url(images/swirls.png) 220px 210px no-repeat; padding: 75px 0 50px 100px;
}
	#section2 h2.total {
		font-size: 82px;
		color: #fff;
		text-transform: uppercase;
		margin: 0 0 2362px 0;
		float: left;
	}
		#section2 h2.total span {
			font-size: 55px;
		}
		#section2 p.btn.total a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			float: left; margin: -32px 0 0 10px;
		}
		[...]
		#section2 h2.categories {
			font-size: 82px;
			color: #fff;
			text-transform: uppercase;
			margin: 0 0 150px 0;
		}
		#section2 img {
			margin: 0 0 150px 0;
		}
		#section2 p.btn.continue a {
			display: block; width: 128px; height: 128px;
			background: url(images/down-btn.jpg); text-indent: -9999px;
			margin: 0 0 0 415px;
		}

Section two switches from a grey background to a dark blue, and starts with a short title and swirly pattern graphic before heading down to the meaty information lower down. This graphic is added as a background image to the section2 <div> and lots of padding added to bump down the content. Classes on each title allows the sizing to be altered to adhere to the original design.

Section three

Section three preview

<div id="section3">
	<h2 class="user" id="user">The average Line25 user...</h2>
	<ul>
		<li class="firefox">Uses Firefox</li>
		<li class="pc">Has a PC</li>
		<li class="time">Browses for 1:39</li>
		<li class="usa">Lives in the USA</li>
		<li class="awesome">Is awesome</li>
	</ul>

	<img src="images/thankyou.png" alt="Thank You, The End" />

	<h3>Again?</h3>
	<p class="btn"><a href="#intro">Back to top</a></p>
</div>
#section3 {
	background: #c1e6e9 url(images/gradient.jpg) repeat-x; padding: 4100px 0 200px 100px;
	overflow: hidden;
}
	#section3 h2.user {
		font-size: 120px;
		color: #476079;
		text-transform: uppercase;
		margin: 0 0 100px 0; padding: 100px 0 0 0;
	}
	#section3 ul {
		width: 534px; height: 1135px; padding: 75px 0 200px 600px;
		background: url(images/user-bg.png) no-repeat;
	}
		#section3 ul li {
			list-style: none; height: 60px; padding: 40px 0 30px 130px; margin: 0 0 106px 0;
			font-size: 70px;
			color: #476079;
			text-transform: uppercase;
		}
			#section3 ul li.firefox {
				background: url(images/firefox-icon.png) left no-repeat;
			}
			#section3 ul li.pc {
				background: url(images/pc-icon.png) left no-repeat;
			}
			#section3 ul li.time {
				background: url(images/clock-icon.png) left no-repeat;
			}
			#section3 ul li.usa {
				background: url(images/usa-icon.png) left no-repeat;
			}
			#section3 ul li.awesome {
				background: url(images/awesome-icon.png) left no-repeat;
			}
		#section3 img {
			margin: 0 0 100px 0;
		}
		#section3 h3 {
			font-size: 70px;
			color: #476079;
			text-transform: uppercase;
			float: left; margin: 0 0 0 830px;
		}
		#section3 p.btn a {
			display: block; width: 115px; height: 115px; float: left; margin: -30px 0 0 10px;
			background: url(images/top-btn.png); text-indent: -9999px;
		}

Section three begins after another short scroll which transitions from the dark blue background to mint green. This section presents information overlaid over a graphic, which is set as the background of a <ul> and the information itself marked up as <li> elements. Classes on each <li> make it easy to attach icon graphics alongside each title, and margins align up each list item between the dotted area of the background image.

Entire HTML in summary

Summary of HTML code

Javascript coolness

A couple of simple Javascript resources quickly add some extra coolness to the design. Firstly we have Cufon, which allows us to bring the League Gothic font from the concept into the web based design. Then there’s the implementation of jQuery and the handy ScrollTo plugin which adds all the fancy page scrolling functionality we need.

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/cufon.js" type="text/javascript"></script>
<script src="js/League_Gothic_400.font.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

In total there’s five Javascript files; the jQuery library; the Cufon script; a Cufon generated font file for League Gothic; the ScollTo plugin for jQuery; and finally my own scripts file for activating and configuring all the Javascript functionality.

To activate League Gothic on the appropriate HTML elements, they’re inserted into the scripts file like so:

Cufon.replace('h1, h2, h3, dl, ul');

As for the scrolling, I already added anchor links to the relevant element IDs in the HTML, so to implement auto-scrolling, the ScrollTo plugin is activated:

$(document).ready(function() {
	$("p.btn a").click(function() {
		$.scrollTo($(this).attr("href"), 1000);
		return false;
	});
});

Rather than write commands for every button, I targeted the ‘btn’ anchor, then used .attr("href") to grab the target from that particular anchor. return false; then stops the original HTML anchor link from working.

The final design

So here it is, the final result of my little experiment!

View the infographic

View the infographic

April 19 2010

07:00

Build a Simple Image Slideshow with jQuery Cycle

Image slideshows are a popular method of displaying numerous sequential photographs in web design. By making use of the handy Cycle plugin for jQuery, we can easily create a slideshow of our own, complete with previous and next navigation controls. Not a master of Javascript? Don’t worry, the Cycle plugin makes it a breeze to add slideshow functionality to your site, with only a few lines of code required to get things up and running.

It’s my goal to one day own a Harley Davidson Sportster, but until that dream day comes, I’ll have to settle with drooling over a bunch of photos. To make my dreaming easier, let’s build a simple slideshow that automatically fades through a small collection of Sportster shots. Previous and next controls would also be handy, to give me the control to navigate between shots are my own pace. Here’s the final slideshow we’ll be building in the following steps.

Harley Davidson Sportster slideshow

View the demo

The PSD concept

Create a new Photoshop document and fill the background with a rough and grungey texture. This one I’m using is from the great collection from the Circlebox Blog. Place in a copy of the Harley Davidson logo and change the blending mode to Multiply to allow the graphic to interact with the texture.

Use a series of tape brushes to create a rough border to house the photography. Paint the brush mark, then use a Layer Mask to thin the border down. Draw a path around any excess and delete.

Draw a rectangle and fill with a temporary colour. Move this into place to simulate where the photography will sit in relation to the overall design.

Switch over to Adobe Illustrator to quickly draw a navigation arrow. Begin with a square and rotate it by 45 degrees, then delete out one of the side points. Add a thick stroke to the shape, selecting the round cap and corner options.

Draw a black circle back in Photoshop, then paste the arrow from Illustrator. CMD-Click the arrow layer’s thumbnail to load the selection, then delete this selection from the circle background. Reduce the opacity of the button to 50% to allow the underlying photos to show through.

Next, find a bunch of shots to fill the slides of your slideshow. Open them up in Photoshop and crop them to size according to the slideshow dimensions. Use the temporary shape to load the required selection.

Begin exporting all the image files from the concept. Elements such as the logo, border and buttons can make use of the PNG-24 transparency option.

The final image collection consists of the background texture, the slideshow border, Harley logo, navigation buttons and five image slides.

The HTML structure

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Harley Davidson Slideshow</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>

<div id="container">

</div>

</body>
</html>

Create a new HTML document in your coding application of choice. We’ll need the usual framework of Doctype, referenced CSS file and a container div to get things started.

<h1>Harley Davidson Motor Cycles</h1>
	<div id="slideshow">
		<ul id="nav">
			<li id="prev"><a href="#">Previous</a></li>
			<li id="next"><a href="#">Next</a></li>
		</ul>

		<ul id="slides">
			<li><img src="images/slide1.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide2.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide3.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide4.jpg" alt="Harley Davidson Sportster" /></li>
			<li><img src="images/slide5.jpg" alt="Harley Davidson Sportster" /></li>
		</ul>
	</div>

Next, the main HTML markup for the slideshow can be written out. First up, the logo would fit well as a header 1, seeing as there’s no other title on the page. Then the slideshow elements are contained in a <div> with a unique ID of slideshow. Unordered lists are used to mark up the two navigation buttons, and each image slide. Each <ul> is also given a unique ID to allow easy targeting with Javascript later.

Style the CSS

body, h1, ul, li {
	margin: 0; padding: 0; border: 0;
}

body {
	background: #e8dbcb url(images/bg-texture.jpg);
}

#container {
	width: 1095px; margin: -40px auto;
	position: relative;
}

h1 {
	width: 262px; height: 226px; margin: 0 auto; position: relative; top: 100px;
	background: url(images/harley-logo.png); text-indent: -9999px; z-index: 10;
}

With the HTML structure in place, we can now add some visual styling with CSS. Begin with some general formatting such as a browser reset, then we can add the background texture to the body and centralise the container div. Because we’ll be using relative positioning and z-index on the child elements, the container will also need declaring as position: relative;. Image replacement methods on the <h1> can soon transform it into the Harley Davidson logo. The <h1> is also positioned relatively to allow it to overlap the images. To ensure it stays on top, it’s given a z-index value of 10 (values 5 and 15 used later).

div#slideshow {
	width: 1083px; height: 518px; padding: 15px 0 0 12px;
	background: url(images/border.png);
	overflow: scroll; /* Allows the slides to be viewed using scrollbar if Javascript isn't available */
	position: relative; z-index: 5;
}

We can now add the bulk of our CSS styling to the slideshow <div> and its child <ul>'s. The slideshow <div> itself is given the exact dimensions of the border graphic, minus any padding used to move the photos into place. It’s then given the border graphic as a background image.

If the user doesn’t have Javascript enabled, the long list of image slides could easily break the layout of any website design, so adding overflow: scroll; will generate scrollbars on the slideshow <div>. These won’t be pretty, but it will maintain usability and accessibility.

div#slideshow ul#nav {
	display: none;
	list-style: none;
	position: relative; top: 210px; z-index: 15;
}
	div#slideshow ul#nav li#prev {
		float: left; margin: 0 0 0 40px;
	}
	div#slideshow ul#nav li#next {
		float: right; margin: 0 50px 0 0;
	}
	div#slideshow ul#nav li a {
		display: block; width: 80px; height: 80px; text-indent: -9999px;
	}
		div#slideshow ul#nav li#prev a {
			background: url(images/prev.png);
		}
		div#slideshow ul#nav li#next a {
			background: url(images/next.png);
		}

	div#slideshow ul#slides {
		list-style: none;
	}
		div#slideshow ul#slides li {
			margin: 0 0 20px 0;
		}

The ul#nav is moved into place with relative positioning, and is given the highest z-index value to ensure it’s always on top.

Both the previous and next buttons are then moved into place and either floated to the left or right, and the child anchors are converted to buttons with the image replacement technique.

Once the ul#nav and its <li's> are styled up, it’s hidden from view using display: none;. Our jQuery will fade these into view later, unless the user has Javascript disabled, in which case the navigation buttons are not needed at all.

Finish off with jQuery

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>

Once the basic structure and styling are in place, we can begin adding extra functionality and effects with Javascript. The jQuery library is my personal favourite, as it’s pretty simple to get the hang of with it having a similar syntax to CSS. Before writing any Javascript ourselves, we’ll need to reference some files back in the HTML. Download the jQuery library and the Cycle plugin, then create a blank Javascripts file named scripts.js, where we’ll add a few lines of our own code.

$(document).ready(function() {

});

In the scripts.js file, write out the basic code to activate jQuery. This basically says once the document is loaded, do whatever follows.

$("#slideshow").css("overflow", "hidden");

Before getting to the slideshow functionality, we need to take care of some CSS. Remember the slideshow div that was set to overflow: scroll;? This needs setting to overflow: hidden; for users with Javascript enabled, so they don’t see the ugly scrollbars.

$("ul#slides").cycle({
	fx: 'fade',
	pause: 1,
	prev: '#prev',
	next: '#next'
});

The syntax for activating the Cycle plugin is as simple as can be, just add .cycle() to whichever element you like. In our case it’s ul#slides. There’s a large range of options and parameters that can be set, but we’ll just configure it to use the fade transition, pause between each slide, then tell the plugin which elements will be used for the navigation buttons.

$("#slideshow").hover(function() {
	$("ul#nav").fadeIn();
	},
		function() {
	$("ul#nav").fadeOut();
	});

Finally, the navigation buttons can be given one extra fancy touch by configuring them to fade in and out whenever the user mouses over the slideshow area. This allows them to become visible when needed, but not distract away from the gorgeous Harley Sportsters! These few lines of jQuery simply say, when the slideshow div is hovered on and off by the user’s mouse, fade in and out the ul with ID of nav.

In summary

Get all that? When everything is combined together, there’s not much to it at all. Here’s the complete HTML, CSS and Javascript codes for reference.

Complete HTML code

Complete CSS code

Complete Javascript code

Harley Davidson Sportster slideshow

View the demo

February 15 2010

07:00

How to Code up a Web Design from PSD to HTML

A couple of weeks back we went through the process of creating a gnarly snowboarding themed website design concept in Photoshop. The tutorial covered the process of designing our site concept from sketch to finished PSD design. Now, let’s take the design to the next step and code up a complete mockup in HTML and CSS, ensuring our code is semantic and standards compliant. We’ll then add some finishing touches with a spot of jQuery.

To refresh your memory

See the making of the concept

Cast your mind back and you’ll remember we left off at the end of the post titled Create a Gnarly Snowboarding Themed Web Design with a finished PSD sporting a textured background, large feature area and a mix of text, images and video making up the main content area.

Check out part one of the tutorial

Cutting up the PSD concept

With our design being pretty design heavy, there’s a good selection of elements that will need exporting from the PSD. The first is the large textured background.

Select the background texture

Disable all other layers then draw a large marquee across the design that includes all the textured elements and blue gradient. Press CMD+Shift+C to copy this selection, then paste in into a new document.

Extend the background to accommodate large monitors

To take into consideration larger monitors, we need to make sure our design is wide enough not to be cropped off. A width of 2200px should be more than sufficient to accommodate even the larger of monitor setups. Select a portion of the gradient and press CMD-T to transform and stretch the background to fill the white space. Save this large image for the web, but take care to balance between file size and quality. With the image being super-sized, it’s important to carefully select the appropriate compression settings. My final file weighs in at 220kb, which is pretty heavy in normal circumstances, but considering that the rest of the design is quite lightweight, it’s a sacrifice that can be justified. We could have made things much easier for ourselves by not including a gradient as well as a texture, this way we could set a smaller graphic in the center that fades out to a flat colour. (Or wait until the multiple backgrounds CSS3 property is more widely supported!)

Selecting the logo graphic

Continue selecting individual page elements with the marquee tool, pressing CMD-Shift-C to copy-merged then paste in a new document and export. Elements such as the logo, feature graphics, profile shots and every small icon needs saving as an individual graphic.

Exporting individual page items

Remember to choose the most appropriate file type and compression setting for each item. An element that is made up of flat colours will be more suited to PNG format. Elements that require a transparent background can be exported using the PNG-24 option.

Overview of all image files

Once all of the images have been saved, you’re ready to move onto the HTML section of the website build.

Building the HTML structure

It’s always important to build the house before decorating the rooms, so we’ll begin by writing out the HTML structure of the website. We’ll base the HTML on the XHTML Strict Doctype and add the initial link to the stylesheet and a containing div to hold the content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Snow Candy</title>

<link href="style.css" rel="stylesheet" type="text/css" media="screen" />

</head>

<body>
<div id="container">

</div>
</body>
</html>

The header

The structure for the header is pretty simple. We have our logo, which is set in a H1 and links back to the homepage. Our navigation is perfect for an unordered list, and each contains an anchor to the relevant page. A class of active will then allow us to target an individual page for highlighting the active page.

<div id="header">
	<h1><a href="#">Snow Candy</a></h1>
	<ul id="nav">
		<li><a href="#" class="active">Home</a></li>
		<li><a href="#">Apparel</a></li>
		<li><a href="#">Team</a></li>
		<li><a href="#">Shop</a></li>
	</ul>
</div>

The content

Next we flesh out the bulk of the page content. The whole main area can be contained within a div with an ID of content. Within this we’ll start with the large feature graphics, an unordered list will once again be a handy element to use, as it allows us to easily list them out in sequence. Inside each list element is each image graphic, complete with a descriptive alt attribute.

<div id="content">
<div id="features">
	<ul>
		<li><a href="#"><img src="images/feature-1.jpg" alt="5th Annual Big Air Jam. 5th January 2010" /></a></li>
		<li><a href="#"><img src="images/feature-2.jpg" alt="Salomon Shred Round One" /></a></li>
		<li><a href="#"><img src="images/feature-3.jpg" alt="Snow Candy in S&auml;len" /></a></li>
	</ul>
</div>

The design then splits into two columns, so we can add a div with a class of column ready for floating with CSS later. Within the featured video section I’ve embedded a cool snowboarding video from Vimeo, followed by the title and description, both set in natural header and paragraph tags. A paragraph tag with a class of “btn” will allow us to set up a global style for any button style objects, allowing some unique styling to be added. The actual Vimeo embedding code has been modified slightly to keep it valid within our Strict doctype, thanks to the help of this article.

<div class="column">
	<h2 class="featured-video">Featured Video</h2>
	<div class="video">		
		<object width="379" height="213" type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1">
			<param name="allowfullscreen" value="true" />
			<param name="allowscriptaccess" value="always" />
			<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=3155182&amp;server=vimeo.com&amp;show_title=0&amp;show_byline=0&amp;show_portrait=0&amp;color=00adef&amp;fullscreen=1" />
		</object>
	</div>

	<h3><a href="#">Snow Candy in S&auml;len</a></h3>
	<p>The Snow Candy team head to S&auml;len to experience the local snow, attractions and lifestyle.</p>
	<p class="btn"><a href="#">See more videos</a></p>
</div>

In the second column, the list of events has a layout that lends itself well to being rendered as a definition list, with the date and event description being relative to each other. The date can be set as the definition title, and the definition description as the content, which will help us target these tags to style up the fancy layout we’ve got going on. With the dates being laid out vertically at different type sizes, adding a span around the month will help provide that extra hook needed for the CSS styling.

<div class="column">
	<h2 class="events">Upcoming Events</h2>
	<dl>
		<dt>5 <span>Feb</span></dt>
		<dd>
			<h4>5th Annual BigAir Jam</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>

		<dt>3 <span>Mar</span></dt>
		<dd>
			<h4>Salomon Shred Round 1</h4>
			<p>Elite riders compete for the title of 2010 BigAir champion in the 5th annual running of the event in Sallback, Austria. Last year’s winner Nate Bailey is returning to defend his crown against some of the most elite names from Europe and the USA.</p>
		</dd>
	</dl>
	<p class="btn"><a href="#">See more events</a></p>
</div>

The last portion of content is the list of team members. Again, this list of objects is tailored nicely to be written as an unordered list element. Within each list element is an anchor link that will head off to the relevant page. Each anchor also has a class to help identify each team member when styling them up.

<h2 class="team">Meet the Team</h2>

<ul id="team">
	<li><a href="#" class="joe">Joe</a></li>
	<li><a href="#" class="charlie">Charlie</a></li>
	<li><a href="#" class="lars">Lars</a></li>
	<li><a href="#" class="marco">Marco</a></li>
</ul>

The footer

The HTML is then closed out with the footer, containing a simple back-to-top link, and the body and HTML tags closed to finish off the document. A quick validation ensures there’s no errors, meaning it’s time to move onto some CSS styling.

	<div id="footer">
		<p><a href="#header" class="back-top">Back to top</a></p>
	</div>

</div>

</body>
</html>

Styling the CSS

Body styling complete

The first line of CSS that’s written is to quickly reset any browser specific styling. Ensuring that we’re starting from a clean slate when it comes to margins, padding and borders. Next, the sans-serif font-family is set on the body tag, to render the Helvetica font throughout the design. A line-height of 24px will help us stick to our 24px baseline grid from the design, and will help fix any differences between browsers.

The main background of the site is then added. First the flat blue colour is specified, then the large textured background. This is positioned at the top center, and told not to repeat. Unlike inline images, background images don’t create scrollbars if they are larger than the content window, so despite our graphic being a huge 2200 pixels wide, a portion of the edges will be hidden according to how large the viewer’s monitor is.

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

body {
	font-family: Helvetica, Arial, Sans-Serif; line-height: 24px;
	background: #b9d2f8 url(images/body-bg.jpg) center top no-repeat;
}

The header

Styling the header section

Next up for styling is the main container div, which is simply given a 980px width and set to appear centrally. This is followed by the header and its sub-elements. The header div is given some padding to create the spacing at the top and sides according to the PSD concept, and is given an overflow:hidden property to clear itself and correctly calculate its height after the floated navigation elements.

The header one tag is given specific dimensions in order to properly display the logo as a background image, and a negative text-indent shifts the standard header text out of the way off-screen. The navigation is then floated alongside it, with a little margin to help align the elements. Each anchor inside the list items is styled to give the appropriate appearance according to the PSD concept, which includes setting the font-size and gaps between each element. They are then finished off with the addition of the transparent brush stroke graphic as a background image for links that have the active class, or are being hovered by the mouse.

#container {
	width: 980px; margin: 0 auto;
}

#header {
	padding: 48px 16px 0 16px; overflow: hidden;
}
	#header h1 a {
		display: block; width: 221px; height: 107px; float: left;
		background: url(images/logo.jpg); text-indent: -9999px;
	}

	#header ul#nav {
		width: 720px; float: right; margin: 42px 0 0 0;
	}
		#header ul#nav li {
			float: left; list-style: none;
		}
			#header ul#nav li a {
				display: block; width: 155px; height: 34px; margin: 0 0 0 25px; padding: 12px 0 0 0; 
				font-size: 24px; text-transform: lowercase; color: #fff; text-decoration: none; text-align: center;
				text-shadow: 0 3px 3px #333;
			}
				#header ul#nav li a:hover, #header ul#nav li a.active {
					background: url(images/active-nav.png);
				}

General content styling

Styling the content background

The main central content area can then be styled to mimic the original PSD concept. First it’s given a specific width, with padding to push the content away from the edges. It’s set to overflow:hidden because it will contain some floated elements, and is given a transparent-white background PNG to create the translucent effect. Other options to create the white transparency could have been the opacity property, or the CSS3 RGBa property, but a good old PNG-24 graphic is the most cross-browser friendly, with just IE6 requiring extra work to enable the alpha transparency.

To finish off the content area, a small radius is added to the corners using the border-radius property. Because this isn’t fully supported yet, browser specific code can tell individual browsers to add the novelty effect.

#content {
	width: 938px; padding: 16px 16px 60px 16px; overflow: hidden;
	background: url(images/white-trans.png);
	border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

Styling the feature section

Styling the features section

The large features section in the design currently holds three slides, but the aim is to only display one at a time. When Javascript is added, these can be tweaked to transitionally fade between each one, but we also need the section to work without Javascript being enabled. To do this, the features section is given the specific dimensions of one slide. The overflow:scroll property will then add scrollbars to allow the user to manually navigation between slides. The UL is given a width of 2820px (3x the width of the slides), and they’re floated side by side. Without limiting the features container to a specific size, the slides would simply fill up the whole page, which ruins the usability of the site. This way, the user can experience the features slideshow, albeit in a much more low-tech way.

#content #features {
	width: 940px; height: 457px; margin: 0 0 48px 0;
	overflow: scroll; /* Changed to hidden if javascript enabled */ 
}
	#content #features ul {
		width: 2820px;
	}

	#content #features ul li {
		float: left;
	}

Styling the columns and their content

Styling the columns content

Remember those two columns we wrote out in the HTML? They need floating side by side, so a width is calculated that will fit inside the content div, and the float:left property added. Inside these columns the video and upcoming events sections are styled. The video div simply has an image background to style up the embedded video, and some padding quickly aligns everything up. The definition list for the events section requires some extra CSS to manipulate the basic definition list element into the fancy layout we have planned. The date of each event is contained within the definition title, so that can be floated to the side and set to a large font-size. The extra span we added then comes in handy to render the month text at a smaller font-size, and as a block element so that it drops down below the number.

The definition description and its header h4 tags can then be given the appropriate typographic treatment once the DD is floated alongside the DT. With all styling complete it matches the original concept perfectly.

#content .column {
	width: 409px; float: left; padding: 0 30px 0 30px; margin: 0 0 24px 0;
}
	#content .column .video {
		width: 387px; height: 222px; padding: 13px 0 0 17px; margin: 0 0 24px 0;
		background: url(images/video-bg.jpg) no-repeat;
	}

	#content .column dl dt {
		width: 55px; float: left; padding: 10px 0 0 0;  overflow: auto;
		color: #fff; font-size: 64px; line-height: 34px;
	}
		#content .column dl dt span {
			font-size: 16px; text-transform: uppercase; display: block;;
		}
		#content .column dl dd {
			float: left; width: 354px;
		}

		#content .column dl h4 {
			font-size: 32px; font-weight: normal; color: #fff; margin: 0 0 5px 0;
		}

Styling the team list

Styling the team section

The last part of the content styling is to flesh out the list of team members. Earlier each team member photo was exported, so these can now be set to each individual anchor tag. Each list item is set to float left, and is given the appropriate margin to space them out across the page. Anchor elements are by default inline elements, so to allow a specific width and height to be set, they need to be converted to display:block. Each individual team member can then be targeted through the class names on each anchor, with each photo graphic and image dimensions being added as a background.

#content ul#team {
	list-style: none; overflow: hidden;
}
	#content ul#team li {
		float: left; margin: 0 0 0 27px;
	}
		#content ul#team li a {
			display: block; text-indent: -9999px;
		}
			#content ul#team li a.joe {
				width: 199px; height: 229px;
				background: url(images/joe.jpg);
			}
			#content ul#team li a.charlie {
				width: 199px; height: 229px;
				background: url(images/charlie.jpg);
			}
			#content ul#team li a.lars {
				width: 205px; height: 233px;
				background: url(images/lars.jpg);
			}
			#content ul#team li a.marco {
				width: 198px; height: 229px;
				background: url(images/marco.jpg);
			}

Styling the footer

Styling the footer

The footer area can be quickly finished up by adding the subtle texture background, and the back-to-top link floated over to the right, styled up and positioned into place.

#footer {
	min-height: 159px; overflow: hidden;
	background: url(images/footer-bg.jpg) center 0 no-repeat;
}
	#footer p a.back-top {
		float: right; margin: 14px 24px 0 0;
		font-size: 12px; text-decoration: none; color: #4d74bb;
	}
		#footer p a.back-top:hover {
			color: #234c97;
		}

Adding the Javascript

Let’s not forget the extra Javascript effects we had planned for that features section. With the help of some jQuery, and the super cool Cycle plugin, we can easily transform that basic features list into a fully working slideshow.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="js/scripts.js" type="text/javascript"></script>

First, the jQuery library and our own scripts file is referenced in the HTML. The cycle plugin is included in the scripts.js, then some of our own Javascript can put it all into practice. First the overflow:scroll on the features list needs changing to hidden to remove those ugly scrollbars, then the cycle plugin is initiated on the features list. By default the plugin will place a simple fading transition between each element, but there’s plenty more options that could be configured.

$(document).ready(function() {

/* Change the overflow:scroll to overflow hidden on the Features list */

	$('#features').css('overflow','hidden');


/* Initiate the cycle on the Features list */
	$('#features ul').cycle();
});

The final concept

View the final demo

So here we have the complete mockup in live HTML and CSS format. Our HTML is clean and valid, and the CSS renders everything how we wanted according to the original PSD concept.

View the demo

Similar Posts

February 08 2010

07:00
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.
(PRO)
No Soup for you

Don't be the product, buy the product!

close
YES, I want to SOUP ●UP for ...