Articles - Page 157

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

Todoist: A Simple and Powerful Tool for Designers

Software / 31 Mar 2014

Todoist: A Simple and Powerful Tool for Designers

There are so many apps and productivity tools out there, making it hard to find things that fit your needs the best. Some tools are packed with too many gimmicks, which can make it hard to be productive. Others are difficult to use or understand.

Enter Todoist. This tool is simple and powerful. After only five minutes, I was beginning to feel like a super-user. And what’s even better is that it is designed well. Not only does this tool work beautifully, it looks great at the same time. Here’s a look at Todoist, how it works and how you can use it in your workflow.

Good Writing and Editing Is Part of Great Design

Business / 26 Mar 2014

Good Writing and Editing Is Part of Great Design

Good writing is arguably the most important piece of a design project. Yes, writing. It happens before the first sketch. And then it continues to happen throughout the design process as text is written, rewritten and edited multiple times.

A stellar design will only get you so far if the content is lacking. Clunky, mistake-laden, or even just plain boring copy will almost certainly ruin any project. Great copy will help a design shine. Here, we are going to look at what good writing and editing can do for your design projects. (Make sure to note the visual examples as well, and how the text and design work together seamlessly.)

Math for Designers: It’s a Numbers Game

Business / 17 Mar 2014

Math for Designers: It’s a Numbers Game

Most of the time you don’t think about math and design at the same time. Maybe you think these concepts are as far removed from one another as possible. But math can be an important skill for every designer.

From working on projects – there are plenty of design theories based in math – to calculating rates and payment for a client project, crunching numbers can be an important item in every designer’s toolbox. Today, we are going to look at some of the time-tested formulas that can be found in great design and ways that every designer can use math. So you might just want to grab a calculator!

Drop Caps and Paragraph Text Effects Using CSS3

CSS / 12 Mar 2014

Drop Caps and Paragraph Text Effects Using CSS3

Websites have become a medium of sharing information with the entire world. This has transitioned to include media like photos and videos. But text on a webpage is still the predominant choice for web publishing. This would imply that how you structure paragraphs, sentences, and text on the page can greatly impact if a visitor chooses to stick around and read what you have to say.

In this tutorial I’d like to share a few CSS tips for building creative paragraph or text designs. Legibility and font choices are often directly related to the design itself. But incorporating text effects like drop caps, highlights, and recognizable hyperlinks will distinguish from other content on the page. Take a peek at my live sample demo to see what we’re trying to build.

The Simple Guide to Creative Commons Resources

Business / 10 Mar 2014

The Simple Guide to Creative Commons Resources

Creative Commons is a tool that allows designers, writers, videographers and web developers to use content free of charge. From text to photos to video to sound, there are a variety of different types of available content that can be used when attributed appropriately.

But where can you find this content? Who can use it? And what really is acceptable to use? Today, we have a guide to creative commons works, proper use and attribution and tolls for helping you find great (and usable) content. (As an added bonus, all of the visuals used in this article were available under a Creative Commons license.)

Tips for Designing Better Mobile Typography

Mobile / 5 Mar 2014

Tips for Designing Better Mobile Typography

Mobile is big right now. But often the typography is small. When it comes to creating great type on small screens, there are plenty of challenges.

So how can you make the most of responsiveness, mobile design and typography? The first step is really understanding type and the second is by thinking about how people read. Put the two together and you will get a handle on creating great mobile type in no time. It’s a skill that every designer needs to master in the digital age.

Creating Visual Hierarchy With Typography

Typography / 3 Mar 2014

Creating Visual Hierarchy With Typography

Visual hierarchy is an important element in any design project. It tells people where to look and what things on the screen or printed page are most important. Hierarchy gives readers a sense of how to actually read material from start to finish with visual cues and flow.

While you can create visual hierarchy using a number of different tools, today we are going to look at ways to create structure with just typography. (And take a look at the images used throughout this post; they are all examples of great type hierarchy in action.)

What Makes a Great Search Interface?

Inspiration / 26 Feb 2014

What Makes a Great Search Interface?

A search box is one of the essential pieces that is included in almost every website design. While sometimes the creation of this small element turns into an afterthought, there is no reason why the search box should not be designed as beautifully as the rest of a website.

The design of a search box should mirror that of the rest of the site, be functional and easy to use and be placed in a location that is obvious to users. Today, we are going to take a look at some great search boxes and a few tools to help you through your own design.

Creating Instagram-Style Photo Filters With jQuery

JavaScript / 25 Feb 2014

Creating Instagram-Style Photo Filters With jQuery

I’ve always been intrigued by the Instagram phenomenon and how quickly it rose to popularity. Photo filters are nothing new but dynamic use of these filters has not always been possible. Building the functionality into an iOS/Android application requires a lot of time. Thankfully developers have worked to replicate this process for the web using JavaScript.

In this tutorial I want to demonstrate how to build a simple Instagram-style filter webapp using jQuery. The library is called CamanJS which is easily extendable to create your own filter plugins. This doesn’t require jQuery but I’ve chosen to use it for a simpler development environment. Take a look at my live sample demo to understand the goal of this tutorial.

5 Online Portfolio Services & Tools Compared

Software / 24 Feb 2014

5 Online Portfolio Services & Tools Compared

Whether you are designing for print, packaging or online, almost everyone wants a portfolio site that is easy to manage and maintain while providing a good visual experience. With so many different portfolio tools and services out there, though, how do you choose what works best?

Today, we are taking a look at five nice online portfolio tools. We’ll weigh the pros and cons and pricing for each in hopes that it will help you choose the right tool to display your work.

Making Vintage Design Work for You

Inspiration / 19 Feb 2014

Making Vintage Design Work for You

Vintage textures and palettes are in. They are popping up in a variety of uses from large-scale design projects to small details in a logo or background texture. This dated-style technique has really made a comeback.

Today, we will look at how you can create and establish a great palette for a vintage-style design from color to type to texture choices.

Building HTML5 and CSS3 Anchor Link Tooltips

CSS / 12 Feb 2014

Building HTML5 and CSS3 Anchor Link Tooltips

There are many tutorials online discussing the idea of CSS-based tooltips. Yet many examples require HTML elements along with the anchor link. Visitors can get a basic tooltip message by using the default title attribute. I’d like to follow this method and update the process just a little bit.

In this tutorial I want to demonstrate how to build CSS3 tooltips which are contextually based on an HTML5 attribute. Using different classes we can incorporate unique color schemes along with CSS3 transition effects. This technique doesn’t require any extra HTML unless you attach the tooltips onto a different element (like a text field). Let’s get started!