Articles Archive

whig

Food-Based Web Design Tips to Make Visitors Hungry

food design

It’s the same routine every date night: “where are we heading for dinner?” To the web we go, looking for restaurants around us that whet our appetites. And the places we always seem to hit after this dinner search are the locations with websites that just make us hungry.

Certain techniques, from color to photos to imagery, are common among the best food-based websites. These sites employ a specific strategy designed to make you hungry. Today we’ll look at how photography, colors, shapes, vivid copy and simple design are used to make mouths of website visitors water.

November 7th, 2013 Posted in Business
growapair

Design Dilemma: Dainty Designers — Grow a Pair!

growapair

There are some designers who just can’t say “no!” to a client. While it’s painful to hear their stories, do they affect the industry for others? Do you need to develop some iron clad nerve to protect yourself?

This is the story of a designer who keeps being called into endless meetings by a client who picks her brain for a new line of product packaging, but still hasn’t committed to her as the designer on the project, nor has the client paid her for her time. I gave her some advice, so perhaps she’ll follow it? Join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

November 5th, 2013 Posted in Design Dilemma
designcalcs-0a

How and Why to Build Your Own Design Calculators

screenshot

Design is a complex beast, web design doubly so. There’s a lot more than visual harmony and balance to consider, it’s often the case that you have to dig in and perform some real life mathematics (gasp!).

Oddly enough, I love thinking about this stuff, so much so that I actually build my own calculators rather than use the tools available from other developers. Today I’ll show you how and why to build your own design calculators so that you can master the numbers behind your designs.

November 1st, 2013 Posted in CSS
How to Build a Minimalist User Profile Layout With Content Tabs

How to Build a Minimalist User Profile Layout With Content Tabs

tutorial screenshot profile layout jquery content tabs

Dynamic content is a big part of modern web design. Whether this is hidden in the page or pulled out of a database, you can improve space in your layout by reorganizing important content elements. This is true of many situations and it works great on user profiles. Oftentimes users will have a myriad of information presented on their page which can be easily digested through the use of tabbed navigation.

In this tutorial I want to demonstrate how we can build a minimal user profile layout design. This is mostly centered around a small set of navigation links, which dynamically change the display between bits of content. Depending on the purpose of your website, these content sections may be split to include photos, videos, followers, and other related information. To get an idea of what we’re building take a peek at my live sample demo.

October 30th, 2013 Posted in CSS
serifsVsans

Serif vs. Sans Serif Fonts: Is One Really Better Than the Other?

screenshot

There is an ongoing debate among designers – both print and digital – about what makes an ideal typeface for a project. The debate almost always breaks down to a single question: serif or sans serif?

Before you answer that question, think about all of the things you know about serif and sans serif typefaces and all the myths associated with them. Today, we’ll take a look at both categories of type and try to determine if one is really better than the other, and in what circumstance.

October 28th, 2013 Posted in Typography
stocktips-0

7 Tips for Becoming a Successful Stock Author

screenshot

The draw for selling digital stock goods is immense. You make something, upload it to a site, and watch the money flow in again and again through repeat sales. What designer, photographer or developer could resist?

Unfortunately, the reality of the situation is that there’s no guarantee that your hard work will yield you a single cent. In fact, it could very likely be a phenomenal waste of time! Today we’re going to discuss some tricks of the trade that will help your foray into this market is a successful one.

October 25th, 2013 Posted in Business
scope.creepy.featured

Design Dilemma: The Scope Creepy Client

scope.creepy.featured

We received a comment to the Design Dilemma article, “How Do I Fire a Client… Legally?” that piqued our interest, so we followed up, and learned about one of the worst situations any designer had faced in recent memory. This wasn’t just a crazy client, or exploding scope creep — it was blatant threats, and emotional, and financial slavery for the designer. Just reading the email from the designer was sickening.

We decided it was well worth relaying the entire story to our readers, so, join us as we delve into another Design Dilemma, helping to answer your questions, queries and concerns about the murky world of design…

October 24th, 2013 Posted in Design Dilemma
design-process

The Design Process: How Do You Get Started?

Design Process

Sometimes the toughest part of a new project is actually getting started. In fact, just this small step can be a process in itself.

As designers, we all have different processes and habits, but there are a few common things that everyone can do to make getting started that much easier (and hopefully result in more efficient use of time, and a better end result).

October 22nd, 2013 Posted in Inspiration
css24hrs-0

5 Steps to Drastically Improve Your CSS Knowledge in 24 Hours

screenshot

You’ve been coding for a while now and know your way around a CSS file. You’re certainly no master, but with enough fiddling you can get where you want to go. You’re wondering though if you’ll ever get past that point where CSS is such a struggle. Will you ever be able to bust out a complex layout without ultimately resorting to trial and error to see what works and what doesn’t?

The good news is that you can indeed get past that frustrating point where you know enough CSS to code a website, but lack the solid foundation that allows you to code without the annoyance of not exactly understanding how you’re going to get where you’re going, and this point is a lot closer than you think. I propose that there are five topics that will drastically boost your understanding of CSS. Spend some time reading about each over the next twenty-four hours and you’ll change the way you code forever.

October 18th, 2013 Posted in CSS
hover-animate-gif-image-gallery

How to Code a Hover-to-Animate GIF Image Gallery

tutorial screenshot animated gif hover gallery with jquery

Animated GIF images are popular on the Internet because they can be easily shared and consumed rather quickly. Using basic HTML you can embed images into a page which feature animation, without relying on any other technologies. Granted – there are plugins for animating sprites or backgrounds – but GIFs are a totally different concept.

In this tutorial I want to demonstrate how we can build an image gallery which optimizes the display of animated images. You can see a very similar feature on Giphy which is also where I downloaded the images for my demo. I am coding my own method which doesn’t exactly follow the same process as Giphy – but the end result is practically identical and works great for all modern browsers.

October 16th, 2013 Posted in JavaScript
Subscribe
Membership