psd

Design Focus: Dribbble Freebies

March 22, 2013 By Sophia Lucero

Can you believe the number of sites dedicated to curating free stuff from Dribbble? Let’s see if they’re as well designed as the goodies up for grabs.

Designs of the Week

Get solid WordPress themes, plugins, and even design training from iThemes.

Fixed header with a slight dip in opacity. Brownie points for being responsive. The filters on the right don’t stay fixed, however. I like the buttons and the card layout, although on the inner pages I’m wanting a bit more on the visual hierarchy. Adding related shots after the post is very helpful but the volume kind of takes away the focus from it.

Not responsive, but I appreciate that the authors are listed with their avatars, and more importantly: even if if the shot titles are truncated with ellipses, they’re displayed in full in the tooltips (lots of people neglect this usability issue). This site’s look and functionality is more minimal than the first.

This one doesn’t shy away from using a dominant color rather than staying with neutrals. The “cover on hover” interaction isn’t unique to Dribbble but you can see it echoed here and on the previous featured site with an icon instead of text details. It’s also nice that you don’t have to click through the post to get to the Dribbble link. The trade-off is there’s no direct link (the off-Dribbble one). Another nice thing: the stats are also displayed here, which might figure into your decision-making of which to click through first.

A departure from the layout and image dimensions of the previous sites: two-column and half your viewport width. Quality is a little sacrificed when the images go beyond 400-pixel width, however.

Social Media Weekly

Search Optimized, Turn-Key Designs, Unlimited Everything. Start building with the Genesis Framework today.

User Experience – Checkboxes that kill your product
“Design by committee often looks like a row of checkboxes.”

Responsive Web Design – A simple (and very rough) responsive table solution
“Would you like to see a super-simple solution for responsive tables – that needs no JavaScript and just a few lines of CSS?”

CSS – Design From the Inside Out With CSS Min-Content
“What we want, ultimately, is a way of saying, “reduce the width of the container automatically so that the image fits inside it perfectly. If text content needs to wrap inside the container to make that happen, that’s okay”.”

Design Focus: Great Deals

November 23, 2012 By Sophia Lucero

Here’s a treat for the Thanksgiving and the holiday season that’s ramping up: freebies, bundles, and deals to help you create beautiful designs, all showcased on inspiring sites to boot.

Designs of the Week

Need help in promoting your site? INeedHits has been in the search engine marketing since 1996!

James Oconnell x 25 Days of Giving website — James Oconnell x 25 Days of Giving

Very bold but still legible color scheme featuring beautiful illustrations (especially the button replacements) and visualizations (especially the animation in the footer).

Take note of the blurred layers in the background and the ever-popular outer space theme for the header.

PeepCode Screencasts Design Bundle website — PeepCode Screencasts Design Bundle

Typographic and icon-based, not to mention responsive. The pop of blue from the logo carries over to the pullquote marks, buttons, and borders.

WordPress Themes Bundle website — WordPress Themes Bundle

Beautiful subtlety everywhere: mixing different patterns and textures for the background, but also knowing when to inject cheer with solid bright colors and illustrations.

Not as beautifully designed as I’d like, or perhaps it’s taste, but very straightforward at the cost of your internet bandwidth!

If you’re not exhausted by skeumorphism yet, you gotta enjoy the ribbons and textured cards that appear to defy gravity here. Also, always a good idea to have an attention-getting and accessible sign up form especially for sites such as these.

This looks a little chaotic at first glance, but it kind of grows on you too, especially when you see all the icons and details as you scroll down, including the “little explosion” animation that happens at the bottom. Very cute idea.

Touch Gesture Icons website — Touch Gesture Icons

I like the geometric background and complementary icy color scheme, although it may be tough to read for some.

I like the little info table at the left column but wish it had been actual text. The header containing all the pertinent information also looks great.

Perhaps there’s a reason this white on blue look is popular with icon sites, and it’s the idea of blueprints and laying down the foundations first.

Social Media Weekly

Want your site to be as good-looking and inspirational as these? Start by choosing a well-designed theme from ThemeForest.

Accessibility – Easy Fixes to Common Accessibility Problems
“Sometimes simple changes can provide the necessary momentum while resulting in significant improvements for users.”

JavaScript – A Few New Things Coming To JavaScript
“The coming year is going to be an exciting time for developers as features proposed or finalised for the next versions of the language start to become more widely available.”

Web Design, Books – The top 50 books for web designers and developers
“The resulting selection is a collection of the very best insight into cutting-edge design and development techniques, inspirational texts, and beautiful volumes to admire.”

Typography – The 50 best free fonts for designers
“Get your hands on the best free fonts, from retro inspired type to slap-you-in-the-face slab serifs!”

Acessibility – Yes, actually, it may be you one day
“When you’re considering whether or not accessibility is important, keep in mind that it could actually be you you’re ensuring accessibility for. If it isn’t you, it will definitely be someone you know, and possibly someone you love.”

Friday Focus 07/16/10: The Many Faces of Paper

July 16, 2010 By Sophia Lucero

The many different textures, colors, and treatments for paper allow infinite possibilities for their use in websites. Not one of these designs look remotely alike, and that keeps things very interesting. Happy Friday Focus!

Designs of the Week

Great idea to do a slideshow that spans the whole background. Looks much less artificial that way.

Everything looks impressively blended in: the logo, Facebook icon, drop-down navigation menu, and tabbed navigation.

Needs refining, but looks pleasant.

Love the navigation background as a torn section of the paper, and you can see the brown wallpaper pattern peeking through.

Excellent hover effects and that overall “big” and “scrapbook” feel.

Love the glowing flame on the logo and the large navigation. I just have some issues with the text padding in the inner pages.

Delightful, delightful details. Love the custom borders most of all.

I like the way the borders and section headers blend into the paper, like faded newsprint.

There are tons of paper textures, but few bother to design with corrugated paper. Especially this way, with the cutouts, layers, and shadows.

A visual and literary feast!

I think it’s great that the video thumbnails have frames that echo the overall look, and the video player interface almost disappears from view.

The page title isn’t so prominent, and there are no visual cues for the navigation in the header, but all the collages look fascinating, if a little overpowering.

Some alignment problems here and there, plus the map background image is a little distracting (could be lighter or darker), but good call on the drop down menus.

I really like the styled translation/localization flags! And pretty much every detail on this site—everything falls into place nicely.

The detail on this design is great, although the font choices for the headers are a bit tired. Not pictured but the animated thing going on in the footer isn’t as refined as the graphics above, looks awkward.

The shadow is a little too heavy, but the tabbed slideshow looks amazing, perfectly blended! Using the red wax seal effect for the social media icons is a good idea too.

Social Media Weekly

Design – Code an Email Newsletter from PSD to HTML

CSS – Vendor prefixes—what happens next?

Design – Zappos.com redesign case study

CSS – CSS Media Queries & Using Available Space

CSS, Typography – Font metrics and vertical space in CSS

Typography – FontShop Education

Friday Focus 07/09/10: Background Repeat

July 9, 2010 By Sophia Lucero

This week on Friday Focus: it’s backgrounds with repeating patterns, a well-loved technique that doesn’t go out of style.

Designs of the Week

The logo doesn’t quite match the vintage look but it draws enough attention like the other elements: large headers, power lines, icons.

Love the snappy slide out animations on the images and the gray/pink color scheme. The details are pretty much perfect and it’s just the social media buttons that look out of place.

Great treatment on the text, and the purple/black/white theme is quite elegant.

I absolutely adore the idea of using not just a flat graphic pattern as a repeating background, but multiple patterns and photos in boxes. The only question is if it’s too distracting for the content, which I think isn’t, because if anything it keeps me glued to this page!

Extremely subtle pattern, but it’s there. Social media buttons look better blended; the letterpressed look helps.

Using your logo as your background pattern? Brilliant.

Again, logo as background pattern, but what really catches my attention here is the transparent and angled images in the carousel.

Love how there’s barely a straight edge in this design, just mostly ribbons and fancy frames.

Striking, but is that Comic Sans I see in the footer?

I actually like that the background is a much larger pattern than what we usually see, which makes it look different from the wallpapered look. It’s also great that the images blend in the same pattern to reinforce rhythm and consistency.

I’ve run into this look so many times now, but I don’t really tire of it, and it’s done really well here. However, for such a sweet and elegant design, I’m wondering if the gray in the navigation is a bit too dark.

Doesn’t this make you nostalgic for the high-gloss designs that have now been replaced by the more subtle ones these days? And actual sparkles! What a fun design.

Social Media Weekly

Community – HOW TO: Get the Most Out of Q&A Sites
“There are ways to ask the best questions, provide great answers and ultimately build your reputation; here are eight guidelines that can help.”

Design – Icon Reference Chart
“A comprehensive chart of icon information for various platforms and devices”

Design – 365psd
“Download a free psd every day for a year”

Friday Focus 08/15/08: Eye-Catching Headers

August 15, 2008 By Sophia Lucero

It’s eye-catching headers this week on Friday Focus. Whether you believe in making the most of the content above the fold or not, it pays to make the top part of your websites extra beautiful because it’s the first thing people see.

Designs of the Week

Let’s start off with a blog and portfolio which reflects the owner’s signature look. I personally love that shade of reddish-fuchsia-pink ever since Last.fm popularized it during early Web 2.0. Here, it stands strongly against shades of gray.

Now aside from a large, chunky logotype that’s hard to miss, you can create a striking header with a bright graphical background. Of course be sure to check if all the text in that area is readable first. In this case, it clearly is as the designers made sure to use light colors where the text was dark blue, and vice versa.

Now here’s proof you don’t need candy colors to call attention to your site. All you need is good contrast, large title text (be reasonable though!), and a lovable mascot. Preferably a bird. Seriously though, if you want to introduce a new product to the masses via a website, say everything you want to in the quickest way possible. The header of the page is the most convenient place to do that.

This is another site that uses more subdued hues compared to our 2 earlier examples, but the callout image is a bit more abstract and at the same time typographical. It also summarizes the services offered by the company. I sure hope they put in some good alt text in there!

Social Media Weekly

Design – Adobe Photoshop: 50+ High Quality .PSD Files and Tutorials
Rev up your Photoshop program and try out all these tutorials and graphics on for size.

Programming – 8 Innovative Design & UI Elements That Make Sites Better
Great ideas for communicating with your audience more easily.

Design Focus: Dribbble Freebies

Designs of the Week

Social Media Weekly

Design Focus: Great Deals

Designs of the Week

Social Media Weekly

Friday Focus 07/09/10: Background Repeat

Designs of the Week

Social Media Weekly

Friday Focus 08/15/08: Eye-Catching Headers

Designs of the Week

Social Media Weekly

About Devlounge

The Best of Devlounge

Search