Articles - Page 200

Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.

Graphics / 9 Feb 2012

Effortlessly Showcase Your Mockups to Clients With QwikVu

If you’re a front end designer, presenting clients with mockups can be tricky. Emailing files can be cumbersome and lead to unwanted questions about how to view the image properly, and many image sharing services aren’t ideal for viewing full-size website mockups in their proper context.

Today we’re going to take a look at QwikVu, a web app that’s specifically built for designers who want to share web design mockups with clients. Is it the tool you’ve been looking for to make client presentations easier? Read on to find out.

CSS / 8 Feb 2012

Three Super Easy Ways to Pull Off a Masonry Layout

Masonry style layouts push the boundaries of creative layout techniques. I personally love how capable they prove to be at maximizing the efficiency of galleries containing items with varying heights. Every bit of screen space is used and the result can be downright mesmerizing.

Today we’re going to dive into the concept, ideas and popular techniques that are currently prevalent in masonry style layouts. We’ll learn three different methods for pulling off a masonry layout, discuss the ins and outs of each and make sure that the result is beautifully responsive and reflows based on browser width.

CSS / 7 Feb 2012

Convert a Pricing Table PSD to HTML and CSS

Today we’re going to grab some PSD pricing tables from Design Curate and try to convert them to pure CSS so you can easily drop them into your site.

It’ll be a super basic but fun exercise in bringing a static design to the web and you’ll learn plenty of fun stuff along the way such as how to style hr tags a create a superscript effect.

CSS / 6 Feb 2012

Code a Useful Expanding Vertical Navigation Menu

Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site.

Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS. Let’s get started!

CSS / 3 Feb 2012

5 Online Playgrounds for HTML, CSS and JavaScript Compared

Local coding environments are great, but it’s often the case that I don’t want to crack open Espresso and spend a few minutes setting up to code when all I really want is to test out an idea or work on a bug. Also, sharing options for most local coding apps are limited and typically require integrating an outside app like Dropbox.

Online playgrounds or sandboxes such as jsFiddle solve this problem by providing you with an instantly ready coding environment for you to begin experimenting in as soon as the page loads. These tools let you combine CSS, HTML and often even JavaScript to create and share coding examples. I’m completely addicted to these things and have extensively tested every one I can get my hands on. Today I’ll go over my five favorites and discuss not only why what I like about each option, but also where they fall short.

Layouts / 2 Feb 2012

How to Create a Facebook Timeline Cover Photo: Examples and Best Practices

Facebook announced Jan. 24 that it will be moving all users to the timeline format in the next few weeks. Although the change will be mandatory soon, you can make it early as some users have been doing since it was launched in September. Timeline is the new Facebook “wall” and highlights your personal information based on when it happened.

The biggest visual change included in Facebook timeline is creation of a cover photo. When someone lands on your page they not only see a small square profile image but also a large photo that you have selected for the top of your page. The shape can a little intimidating and includes a hole where the profile image rests. But you can crop or create your own timeline cover photo in just a few minutes. Follow along as we take a look at some great examples and advice for creating the perfect cover photo.

Graphics / 31 Jan 2012

Why Almost Is a Dirty Word in Design

Almost. It seems innocent enough right? Surely there’s no evil lurking in those six letters. You might even see this as a positive word. However, as a designer, you should always be on guard when this word can describe certain aspects of your work.

Read on to see why “almost” can be a dirty word and how it just might be bringing down the quality of your work. We’ll also take a look at two underlying foundations of good design that provide ready solutions to solve your “almost” design woes.

CSS / 30 Jan 2012

Code an Awesome Animated Download Button With CSS3

Follow along as we create a simple and fun download button using some fancy CSS3. Our button will use lots of fun goodies including border-radius, box-shadow, linear-gradients, z-index and transitions to achieve a unique double sliding drawer effect on hover.

As we go, I’ll discuss why some techniques that you might think to use should be avoided. Transitions are tricky to work with and are quite prone to refuse to work with certain properties. Read on to find out more.

Typography / 26 Jan 2012

Pick the Right Typefaces for Your Project

Sometimes the most daunting part of a new project can be the brainstorming phase. Thinking of color schemes and font selections can be inspiring in your head, but really tough when you start mixing and matching elements on paper or for your website.

Understanding some of the history of fonts and typography can help make any project a little easier. Learn how to pair different typefaces to get desired effect every time and learn what things to avoid. Sharp typography and font selections can really make or break just about any project.

Business / 25 Jan 2012

Addictive UX: Why Pinterest Is So Dang Amazing

Today we’re going to examine a very specific example of good design and discuss what makes it so successful. Along the way we’ll discover the importance of good design and how to structure experiences that turn users into addicts.

We’ll hone our sights in on Pinterest and perform a seriously in-depth analysis to see why this seemingly generic idea seems to stand so far out from the competition. The ultimate conclusions will equip you to design experiences that your users will absolute love.

CSS / 24 Jan 2012

Jumpstart Your Web Project With HTML KickStart

Recently, we took a look at a really solid framework from the good folks at Twitter called Bootstrap. This toolkit is a swiss army knife of utilities and includes both a functional layout grid and enough pre-styled elements to get a great jumpstart on any project.

Today we’re going to look at a very similar tool from Joshua Gatcke called HTML KickStart. This framework is simply overflowing with great stuff that will enable you to build web page prototypes at light speed. Let’s jump in and build a page with it to see what we think.

CSS / 23 Jan 2012

Nailing Browser Support in CSS3 and HTML5: Invaluable Resources to Use Today

New technologies are making web development more exciting than ever before. HTML5 and CSS3 provide a double dose of modern practices that are absolutely refreshing and empowering. Unfortunately, utilizing these technologies can considerably complicate your quest for cross browser compatibility.

How can you know which techniques are safe to use now and which you should either provide alternatives to or avoid altogether? Join us as we take a look at a handful of our favorite resources that quickly and easily help you make informed decisions about real world HTML5 and CSS3 implementation.