Category Archives: Web Design

Tantalizing Textures: Sources for Textures, Tutorials and Inspiration!

Jun
4

No Comments - LEAVE A COMMENT

Using textures in your designs is one sure way to give an item a more realistic feel and depth. Using textures, patterns and other grunge-type effects are one of my absolute favorite design methods. I end up being drawn to this type of design over any other.

Below I have gathered some awesome resources for how to use textures, and where to get them as well as a small, but awesome collection of texture inspiration. Don’t forget to check out the “Tantalizing Textures” bucket I have created on dribbble, that I will be constantly updating to collect texture inspiration.

CONTINUE READING...

Freebie: MyBookClub Book Club Layout – 2 PSDs

Jun
2

5 Comments - LEAVE A COMMENT

Like most designers not every design I create is accepted by the client the first go-round. Occasionally I am left with a design that is perfectly fine, but just wasn’t suited to the client’s taste.

A few months back I had this design left over for a library website. The design wasn’t used and there it sat forgotten on my hard drive.

I’ve decided to share the two PSDs for the design (the main page and the inside page) with everyone.

CONTINUE READING...

28 Stylish Article Headings, Date & Meta Data Designs

May
31

13 Comments - LEAVE A COMMENT

There is nothing that will grab the attention of visitor’s to your blog like a creative and thoughtful eye catching title/date/meta data design.

The most important aspect of a blog is the content within it. It doesn’t matter how great (or poor) your design is overall if the attention of your visitors isn’t being directed to your content. And the best way to get people reading your content is with a snappy title that grabs their attention by both how it looks and what it says.

That being said, good design for a blog post’s title (date and/or meta data) does notnecessarilymean that it needs to be blinged out to the nth degree with graphics, icons and backgrounds/textures. Good choice of fonts, color, and arrangement of the information is the basic architecture you need to start with. Once you have your frame developed, choosing to add in accents such as background images and extra design elements that will pull the eye to the titles may be beneficial.

I did a some research and handpicked 28 different blog title designs that I believe are awesome examples of effective and well designed titles, date and meta-data designs. Some have extra design elements that pop and help draw the eye to the title. Some have no graphical elements at all – relying merely on awesome typography and the arrangement of the data. All draw the focus to the article title, where users will be able to make a decision if this is the right content for them.

CONTINUE READING...

How to: Anchor the Footer to Bottom of Page (or Header to Top)!

May
29

46 Comments - LEAVE A COMMENT

Update 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Yesterday I discussed another method of creating a full width header and footer while still keeping your interior content centered. I’m going to expand on this method, and show you how to take the full width footer you’ve created and anchor it to the bottom of the browser window so the page’s content scrolls underneath it.

At some point I’m sure you’ve encountered this technique along your web travels. Some call it a static footer, others fixed position, others a “sticky footer“. Whatever you call it, it remains anchored to the very bottom of the page, no matter how much you scroll.

CONTINUE READING...

How to: Create Full (100%) Width Header/Footer with Centered Content (Updated)

May
28

59 Comments - LEAVE A COMMENT

Update #3 2/1/2015 – Final update! I have made the final version completely simpler and completely responsive! Disregard this version and all others. The only version you should read and download is the New Update: 100% Full Width Header & Footer with Centered Content (Including “Anchored” Versions).

Update 1/15/2012Please see the latest release of 100% Full Width Header/Footer with Centered Content.

I originally wrote a tutorial on how to “Create Full Width Header & Footer With Centered Content Using CSS” almost three years ago (yipe!) when I was working on one of the many redesigns of my site. Looking back on it now (since it’s one of my most popular articles), I see it’s slightly different as to how I have been doing it recently. Both methods work, both can be used, but I find my current method a little bit “cleaner”.

CONTINUE READING...