Category Archives: Web Design

Where to Get High-Quality, Free Images for Websites

Posted on by

One Designer’s Top List of Free Images for Websites

Where to get free images for websitesA friend and colleague just asked me: “Can you tell me where I can get free (truly free) photos to use on website or graphic design project?”

Yes I can! But why stop with photos? When you’re designing a business website, photos are just one resource you need.  You also need social media icons, buttons, form elements, textures, and inspiration!

Here are my #1 sources of free images for web design in each category:

Photos and Theme-Setting Images

From the moment I discovered Stock-Exchange, I knew I found my go-to resource for inspiration to express a main idea. It was originally set up as a community for photographers to exchange images for free.  Some artists require name credit and a link – others offer their work with no attribution required.   You can choose from hundreds of thousands of high quality images, even for commercial projects, as long as you abide by the Standard Restrictions for use.

See:
Stock Exchange
Stock Exchange Links for additional free photo resources

Buttons, Background Textures, User Interface Elements

Premium Pixels is the wildly generous gift of insanely talented designer Orman Clark.  It began as a way for him to share design tools and images, and resources that took a lot of thought and time to make, just because others might find them attractive and useful.  They are!  Now it includes hand-selected contributions from other stellar designers. Browse the ever-growing collections of eye-popping, high quality icons, entire site layouts, device representations (smartphones to big screens), textures, buttons, and more.  Subscribe for a weekly freebie in your inbox.

See: Premium Pixels

Social Icons

My favorite set of social icons is from Pixden.  They’re so well designed; they enhance every site I’ve used them on, like inlaid gems.  I use the dark icon set.  Take a few minutes to explore the layers in Photoshop.  Each icon comes in a uniformly dark version, for the inactive state, and a colored version for the hover and active states.  Implement them however you like.  All Pixden’s resources are royalty free for personal and commercial projects, without a link or attribution required: Just follow the Terms of Service

See:
Dark Social Icons Set by Pixden

AWeber Signup Forms

Don’t like the Aweber form templates? Personally I often find I need custom styling for clients websites, Derek Halpern’s post on DIYThemes is a quick lesson in creating custom styles for your Aweber forms.  He even had a designer create 7 styles you can download, with instructions.  You can use them as-is or as a starting off point for customizing your own AWeber signup forms:

See: 7 Custom AWeber Email Signup Forms, by Derek Halpern on DIYThemes.com

Inspiration

My favorite resource for design inspiration and an update on trends isn’t a website.  It’s a book: The Web Designer’s IDea Book.  Now in Voluem 3, it’s Patrick Neil’s obsssion-driven collection of screenshots of the best websites all over the planet, across industries, applications and agencies.  It’s an outgrowth of his ever-evolving blog, Design Meltdown.  Between print volumes, you can see what catches Patric’s Eye in the Monster Meltdown collections.

See:

The Web Designers Idea Book  published master collection of inspiring designs
DesignMeltdown blog of resources
Monster Meltdown inspiration organized into focused topics
– all by Patrick McNeil

Free is Nice, but Don’t Skimp on Quality

I admit, I love free images for websites, but the quality must be high. If you can’t find something you like for no cost, consider browsing some stock photography sites.  These sources of free images are great, but they won’t supply all your needs forever, especially as you grow.  Whether your new or a seasoned designer, they’re a great place to start when planning your next project.

Helpful to you? Let your friends know by sharing this to your world:

Easy Drop shadows with CSS3 Generator

Posted on by

css3 generator tool by Randy Jensen

Online CSS3 generator tool by Randy Jensen


One of the most exciting developments in web design is the new rendering power of modern browsers. Web designers can add new instructions to style sheets that produce drop shadows, rounded corners, smooth transitions and other effects — all without the coding burden required before. The latest stylesheet standard — CSS3 — gives you more elegance and visual appeal without the extra code and images used to get these results before.

Get Fast-loading, rich visual effects with CSS3

To use the new design features, all you have to do is know how to write the rules correctly in your stylesheet.

This can be a steep learning curve. So, people like Randy Jensen have jumped in to help us with free tools to test and write the code snippets we need.

Check out the CSS3 Generator at css3generator.com

Jensen gives us a way to select the visual effect we’re looking for, and a form to try out different settings. Using the simple preview area, you can check for the results you want, and then copy and paste the code snippet for your stylesheet.

What a great tool. Whether you’re a professional or a dabbler, this code generator will help you quickly add more elegance and visual appeal to your web design without the bloat of images and bulky instructions.

Other helpful resource for CSS3

Even with the CSS3 generator, you’ll need to check different browsers to make sure the results are ok. Also, you may want to look at the markup from the experts. Chris Coyier is one, at CSS-Tricks.com. His shadow markup includes a rule that isn’t created by the CSS3 Generator. You can find out more here:
CSS-Tricks: a wealth of tutorials and blogs to help you master techniques and use them wisely.

Content Precedes Design: Words Drive Optimal Web Design

Posted on by
Web content feeds web design

Content feeds design.

Web design exists to help people grasp and consume specific content.  Blogger Hafiz Rahman reminds us that design’s job is not simply to make any-old content look decent.  Its job is to help people gain the benefit of words, images, products or interactions they seek.

That’s the principle behind the claim “content precedes design.”  It’s also why much-admired Rahman urges designers to give up creating one-size-fits all themes.

Every business owner with a website can gain a lot from this plea to put content first.

Placing priority on substance is a reminder that serves us all very well.  Our love of eye candy can blind us to seeing the real value of our words and ideas to our online success.  Theme developer Jeffrey Zeldman clarifies beautifully:

Content precedes design. Design in the absence of content is not design, it’s decoration.

It’s our message and offer that appeal to our visitors in the first place.  The substance on the page drives the value of our websites.

When you want to make sure your website is doing its best to connect you with your market, first check if you make plain what your people need to know.  When your visitors quickly grasp the most significant benefit, and they have reason to believe you, you are more likely to get what you ask.

A website for a business consultant is going to serve a specific market with specialized information. The look is optimal when easy use of the information drives form. Addressing the needs your target customer brings (not just delighting their eyes) is the key to moving people.

The substance of your page is the true value that pulls in visitors to come and use your website.  The design’s job is to get out of the way.  It starts working when your visitor sees the value in your offer, from the first glance around your page.

Thanks to Themeshaper’s Ian Stewart for calling out Rahman’s case for priority-driven web design.

http://www.wplover.com/2035/on-designing-generic-themes/

Web Design for Social Media Sharing Icons: Huffington Post’s Tidy Approach

Posted on by
Huffington Posts "glamorous_4", an aptly named css class for a neat group of icons

Huffington Posts "glamorous_4", an aptly named css class for a neat group of icons

Widespread social sharing is the goal (perhaps the dream) of just about every blogger.  We want readers to invite other readers, by sharing our posts on Facebook, Twitter, Digg, StumbleUpon, Google +1, or other favorite social network.  If our goal is to help people with each posted tutorial or tip, there’s no better proof of success than seeing readers pass our information on to their friends.

So in web design, we try to make sharing easy.  We put the buttons and icons for sharing tools in easy reach, and obvious at a glance.   The problem that comes up is the clutter.  How many services should we represent with icons? How many counters?  Should we put them at the top of the post?  The bottom? Both?  What about all the bright colors?  Sometimes the effort to include a generous selection of social sharing icons ends up looking  more like a charm bracelet or a spilled candies than helpful interactive links.

One inspiring solution comes from the Huffington Post.  Instead of stringing their social sharing icons like so many hankies on a clothesline, Huffington’s designer has grouped them in a neat little box off to one side:

I fell in love with this solution as soon as I saw it:  it’s compact, organized, and toned down, so it doesn’t fight with the design or interrupt the visual relationship between the post title and the body of the entry.  But it’s handy enough to be found at a glance.  It’s a compact bale of collected social sharing tools.  The text  simply flows naturally around the bundle like a lazy river. and your eyes do too.

It works so well, you can surround your core 4 with other conversion options:  here on this example above, the mailing list signup form is part of the “social icons bundle.”

Giving readers social icons goes from annoying to elegant; from being a sprawling mess to a composed graphic.  Who else likes this too?