Articles Archive

newsletterslede

Simple Tips for Designing a Newsletter Template That Stands Out

screenshot

Almost every business has an email newsletter these days. From retailers promoting sales, to organizations showcasing information and events, the email newsletter is one of the most popular marketing tools out there. And for it to really be effective, it must look good.

An almost unlimited number of free email templates can make it easy to just download something and send out an email, but you should really take the time to create a custom template for communications that represents your business and who you are. Your newsletter represents your work just as much as a website or printed product. Although getting started can be intimidating, it’s fairly easy to create a newsletter template, choose software for distribution and send your first group email. It is important to keep in mind that most people get a lot of email every day, so you must work to make your newsletter stand out.

April 29th, 2013 Posted in Business
Infinite Scrolling

To Infinite Scroll or Not to Infinite Scroll: Where We’ve Come So Far

Infinite Scrolling

Today we’re delving into the most relevant facts on how infinite scrolling turned out to become such an acclaimed technique all over the web, and why, despite its popularity, it’s not yet all that widely adopted in web design.

This feature appeared at a point in the history of the Internet when the amount of information to be presented on web pages increased, and the speed of connections allowed the reader to access and transfer information at greater rates. The question of infinite scrolling on web pages is one of the aspects involved in the user experience design, and isn’t as cut-and-dry as you might think.

April 26th, 2013 Posted in Navigation
featured-list-icons-columns-preview

Creating Content List Columns Using Entypo Font Icons

featured preview CSS3 input form transitions

There’s a general trend towards smaller “column listings” in homepage layouts. Specifically, tech startups and landing pages use this effect for promoting features in their products. But it’s a neat little design layout style for any purpose, and using icons in your design will break away from the normal template designs for an intriguing list display.

In this tutorial I want to demonstrate how we can use custom CSS3 webfonts as an icon inside the HTML. We will create a very basic startup website using the two-column list approach. All of the CSS is very straightforward, although you may need to do a bit of research on some of the properties. This effect is native to all standards-compliant browsers and renders perfectly on OS X or Windows.

April 24th, 2013 Posted in CSS
mindreader.featured

Design Dilemma: Communicating Design to Non-Creatives

mindreader.featured

Omar G. Writes: My boss is impossible to read and I feel like I have to be a mind reader to come up with a design he likes. He blames me for not being able to please him, and I feel ill every time I get a new project from him. Should I just look for a new job? I like my coworkers and the company but my boss is crazy!

Omar, this is a very common problem but one of the easiest to fix. Let me relate a story about one of my experiences then, after feeling a little unwell from the memories of how tense this situation can be, I’ll can explain how to please your boss!

April 23rd, 2013 Posted in Design Dilemma
Keyboard-Graveyard

The End of Keyboards: A Question of “When?”

Keyboard-Graveyard

On Wikipedia, the definition of a keyboard is a “typewriter-style device, which uses an arrangement of buttons or keys, to act as mechanical levers or electronic switches”. In an age where technology is seemingly magical in its state of advancement, our beloved peripheral is starting to feel more like a relic than a modern input device.

As attached as I am to keyboards, I have clear vision to the light at the end of the tunnel. With the prevalence of pen inputs, touch screens, voice commands and other new ways of using technology, its time for us all to admit; The keyboard era is coming to an end.

April 17th, 2013 Posted in Business
preview

Data Driven Design: A Simple Primer

preview

Web apps are becoming ever-more prevalent on the internet. Some may argue that they are simply more complicated websites. Regardless of their definition; what happens when you are designing for large amounts of constantly fluctuating data?

There are a few examples of data driven interfaces and they all have to handle a lot of varied data that is constantly changing. The most common are admin areas and analytic dashboards. The data can take many forms; graphs, charts, tables or text. Each can be displayed in a variety of different ways depending on the context and meaning you are trying to convey with the data. One thing to remember is that you can rarely be sure of the length or amount of data you need to cater for; so think simple to start…

April 15th, 2013 Posted in Graphics, Layouts
focalpoint-7

Focal Point: Intelligent Cropping of Responsive Images

screenshot

The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more.

Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works.

April 12th, 2013 Posted in CSS
yellow

Design a Business Card That Won’t Get Thrown Away

yellow

It’s an almost unavoidable part of doing business – the business card. While more people are beginning to ditch traditional paper cards for digital counterparts, the business card is still an integral part of doing business. Cards are almost as commonplace as the handshake.

So what makes your card stand out from the pack? How can you design a card that won’t get thrown away minutes after the meeting? Let’s delve into some suggestions and tips today.

April 10th, 2013 Posted in Business
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
Subscribe
Membership