Articles Archive

featured-preview-transition-css3-input-fields

Helpful HTML Form Feedback With CSS3 Transitions

featured preview CSS3 input form transitions

Designers may have noticed an ever-increasing use of CSS3 transition properties. Website interfaces have been dramatically improved with custom animation styles, all without the need for JavaScript (when used sensibly, of course!)

In this tutorial I want to demonstrate how we can build animation effects in HTML5 input fields. I’ll be designing a simple contact form with a couple of fields and a textarea. Using the CSS3 :valid pseudo class it is easier than ever to customize text inputs. Check out my live demo example to get an idea of what the final product looks like.

April 8th, 2013 Posted in CSS
ds-mobilefirst-f

Mobile First Design: Why It’s Great and Why It Sucks

screenshot

Historically, most web designers and their clients have approached the desktop side of any project first, while leaving the mobile part as a secondary goal that gets accomplished later. Even with the rise of responsive design, many of us begin with the “full size” site and work our way down.

There’s a growing trend in the industry though to flip this workflow on its head and actually begin with mobile considerations and then work up to a larger desktop version. Why would you ever approach a project this way? What are some of the pros and cons of this strategy? Read on to find out!

April 5th, 2013 Posted in CSS
emslede

What’s the Deal With Em and Rem?

screenshot

With all the talk about designing for responsive websites, two little words keep cropping up – em and rem. But what are they?

Em and rem, along with pixels, are units and methods to measure and resize type. Em and rem are relative, rather than static, units and are being used more and more for responsive web design schemes. Let’s dive into this concept today and explain things a little more clearly!

April 4th, 2013 Posted in Typography
contract.feature

Design Dilemma: Why a Contract Is Always Necessary!

contract.feature

Join us as we delve into our first “Design Dilemma”, helping to answer your questions, queries and concerns about the murky world of design…

Jody L. Writes: I have a simple logo project that should have taken a week and because of changes and indecision on the part of the client, it became two months of hell. Now the client is refusing to pay for changes. I delivered the logo and the client has already printed it. I don’t have a contract or anything. What can I do to get paid the full amount and for the changes?

April 2nd, 2013 Posted in Design Dilemma
decisions-0

Don’t Be a Pansy: Great Design Is About Making Decisions

screenshot

What sets the great designers apart from the good ones? What goes wrong when a project with so much potential turns into something lackluster and subpar?

Decisions decisions decisions. Great designers recognize the key decisions that have the ability to make their projects special and have the courage to make those decisions. Read on to see how.

March 28th, 2013 Posted in Business
cmyd-featured-01

How to Creatively Market Yourself as a Designer



screenshot

Sometimes it seems like every time you jump online, you read about a talented new designer who’s making it big with their latest project. There are a lot of wonderful designers out there, and the constant showcasing of others’ skills makes it feel all the more like you’re lost in the crowd. It’s not enough anymore to have a solid portfolio and work experience; if you really want to stand out in today’s market, going the extra mile in marketing yourself can make all the difference in landing the perfect job, or getting some great freelance projects going.

When you’re considering all the ways that you could market yourself, the most important thing to take into account is how much of a time commitment you can realistically make. Don’t overstretch yourself with a daily blog entry or illustration unless you think you’ll be able to do a great job on it. There are many different levels of requirement for projects that can make a difference in your career; choose what works for you.

March 27th, 2013 Posted in Business
5 Important Lessons I’ve Learned About Mobile App Interface Design

5 Important Lessons I’ve Learned About Mobile App Interface Design

I have been designing for a living since 2009 and, in the past three years, I have been focusing my skills on both web and mobile user interface design. During this time I’ve experienced the good and bad of the industry. Good clients, bad clients. Good ideas, bad ideas. Good developers, bad developers. There have been app approvals and app rejections.

Sometimes it can be frustrating, and although these so-called “bad experiences” can suck, they’ve taught me some important lessons. These lessons not only speed up my day-to-day workflow but also help me design a better user experience for the target audience.

March 25th, 2013 Posted in Business, Layouts
checkboxvoodoo-f

Using Checkboxes to Toggle CSS and Create Click Events

screenshot

More and more lately I’ve seen developers utilizing tricks to create toggle states using pure CSS. This allows you to skip the JavaScript without sacrificing the interaction. How does this work? Is it an acceptable practice?

Today we’re going to examine two distinct methods for utilizing a checkbox to create a click event that swaps between two images using good old HTML and CSS. We’ll finish off with a brief discussion on semantics and the pros/cons of this technique.

March 24th, 2013 Posted in CSS
Simple Steps for Creating a Fixed Navigation Bar

Simple Steps for Creating a Fixed Navigation Bar

featured-image-scrolling-navbar-navigation

When designing a navigation system for your website it is important to consider dynamic alterations for handling mobile support and responsive designs. But another systematic approach is to keep your visitors in full control throughout the entire viewing process. This often requires a quick-to-access menu or dropdown area for pulling links to other webpages.

In this tutorial I’m going to be building a top navigation bar which appears only after moving beyond the header navigation. This effect is great if you have a few pages which are most commonly accessed by visitors. The sticky navbar will stay fixed at the top of the screen and only disappear when re-entering the header nav zone. To get an idea of what we will be making check out my live demo example after the jump!

March 20th, 2013 Posted in JavaScript
featured-mixtype

Mixing Typefaces: Tips and Techniques

Mixing typefaces can be on of the most rewarding, and trickiest parts of the design process. Creating the perfect pairing of typography can result in a beautiful and perfectly readable outline for almost any project.

But how can you get started? What should you consider when mixing typefaces? While the answers aren’t black and white, there are a few things you can do. Think about contrast, x-heights, shapes and slants and overall mood when combining typefaces for any project. In this article, we’ll be delving into each of these in a little more detail!

March 19th, 2013 Posted in Typography
Subscribe
Membership