Articles - Page 174

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

CSS / 27 Feb 2013

Zen Grids: A Responsive Grid System Built on Sass

Building grids was moderately complicated before responsive design, these days they can be downright intimidating. When you dive into a complex layout, it’s easy to get lost in all of the math and percentages. Sure, the hardcore nerds among us love to play with this stuff, but some developers just want to get to work!

Today we’re going to look at an awesome grid system that will help you set up your responsive grids with very little effort. It’s semantic, built for responsive design, completely flexible to the way you work, and powered by Sass. Meet Zen Grids.

Typography / 25 Feb 2013

Is My Type Stressed? a Primer on Stressed Typography

As a designer, either working with a design firm or on a freelance basis, you probably know a lot about stress. From deadlines to redesigns, client relations to cash flow — it is part of everyday life for someone working as a designer in any capacity.

But did you know your typography could also be stressed? Just like in your life, type has certain pressure points, and there are good and bad types of type stress. In today’s article, we’re going to delve into this concept in a little more details. We’ll walk you through exactly what types of typographical stress there are, how you can ensure it doesn’t affect the readability of your designs.

CSS / 22 Feb 2013

5 Simple and Practical CSS List Styles You Can Copy and Paste

Who doesn’t love a good list? We use them constantly in our markup for a variety of different situations. Today we’re going to take a look at a few simple and practical examples that you can steal and use in your own work.

We start off with a fun animated vertical list, then style up a list with thumbnails and text, another with just images and finally an ordered list where the numbers are styled differently than the rest of the type. There’s a ton of great things to learn here so let’s jump in!

Keynote Templates / 20 Feb 2013

5 Tips and Tools for Designing a Stand-Out Presentation

Most people who need to create an exciting presentation are not design experts. Fortunately, there are a number of really neat tools and websites that can assist you in creating a captivating, professional look for your slides.

In this article, we’re going to take a look at five such tools. While I can’t promise that these tools alone will turn you into a design professional, they will certainly point you in the right direction.

Business / 18 Feb 2013

5 Reasons You Should Go to a Design Conference in 2013

I recently returned from the New Adventures in Web Design conference in Nottingham, and it’s left me taking stock of just what I’ve gained from going to a design conference. Having attended this conference for the previous two years I can honestly say I’ve gained more from the conference experience than simply “a day or two out of the office”.

I’ve seen world class speakers, new speakers just starting out & met and spoken to a lot of really good people. There are hundreds of design and development conferences all over the world, ranging from single track design or development only to multi-track 2-3 day events covering a multitude of specialisms concurrently. Whether you choose to take a day out or go for the full experience, there’ll be a conference to suit every interest and wallet. Sadly 2013 was the last year that New Adventures will be run, with organisers, Simon Collison and Greg Wood taking a well deserved break to concentrate on their own projects. The New Adventures experience has really whet my appetite for conferences and, while I’m not a serial conference-goer, I’ll definitely be on the lookout for a replacement for that experience. But what can you get out of a design conference?

CSS / 15 Feb 2013

Code a Fantastic Animated Circular Thumbnail Gallery With CSS

Thumbnail galleries are a constant source of fascination for me. There’s so much more fun to be had than simply creating a grid of squares and calling it a day. Especially since CSS3 gives us so many powerful new tools to work with.

Today we’re going to mix up the boring old standard image gallery by turning it into a series of animated circles. Along the way we’ll learn a ton of helpful CSS knowledge that will help you in all manner of future projects.

Business / 13 Feb 2013

Treat Every Release as if It Were Your Last

Since the beginning of time, the design process has remained mostly the same. Design comes before development. Talented designers pour over examples, studies and hypothesis to produce something deemed worthy of releasing. However, since the old days, a lot has changed in the way we build things, especially in software development.

With the lean revolution upon us, people have traded isolation rooms and waterfall planning charts, for open spaces and continuous delivery. As tough as the transition has been on developers to find new methods and change mindsets, people often overlook the fact that the process has fundamentally changed for most designers. But in a world where test and learn is the law, we’ve created a battle between quality and deadlines. That’s why I urge every designer I meet: treat every release as if it were your last.

Freebies / 12 Feb 2013

30 Brand New Creative VIP PSD & CSS Design Resources

Loads of new freebies and open source codes are placed online every day. Web & mobile designers can learn a lot by studying newer interface trends and design layouts. Creative VIP is one such website which publishes freebies and premium content. This is an excellent resource for designers who want to dig a bit deeper into constructing usable layouts for the web.

In this roundup I have put together 30 of the latest freebies from Creative VIP. You will find both PSDs and HTML/CSS codes mixed in with each other. Some resources actually offer both graphics and the code together! But no matter what items you’re looking for, this showcase is bound to have something cool.

Layouts / 8 Feb 2013

How to Use Centered Alignments: Tips and Examples

Today we’re going to go back to basics with a “design 101” discussion on alignments. Centered alignments are an easy place to go wrong and if you don’t know how to wield them properly, the result is a very poorly structured page.

Join us as we take a look at why centered alignments tend to be weak, where you should avoid them and how you should be using them.

Business / 6 Feb 2013

Do Art Schools Ultimately Fail Their Students?

I admit I loved being asked to speak at art schools throughout my career. It said that I was a professional with something worth saying. My comedic, entertaining style of speaking about the industry and how to prepare to enter the business put me in great demand and as many of my peers taught at area schools, I found myself speaking at every NYC area school each spring semester to graduating seniors.

Sometimes I would show samples of my work and speak about the battle to get them through committees or why they were turned down. I discussed interviewing, portfolios, finding work, contracts, selling and other professional practices students would need to survive and thrive in the creative industry. For my trouble, I usually was treated to lunch by my friends and stories of their students who had no chance to make it in the field.

CSS / 4 Feb 2013

Creating a CSS Thumbnail Grid With a Dynamic Flyout Menu

When presenting data in a grid you often lose the ability to include extra information. Aside from appending dynamic menus or hover effects there is very little room to include metadata on each item. I want to use this tutorial as a thought process into the user experience of image thumbnail grids.

We will create a small flyout menu holding additional information on the image. This includes the image name, original source URL, and author URL. The beauty of this example is that we will be creating the dynamic effect using only CSS3 properties. Mostly all standards-compliant browsers will support dynamic CSS3 animations and these look fantastic! But even without animations, the flyout content will still work properly and degrade naturally for an all-around enjoyable user experience.

CSS / 1 Feb 2013

Gridpak Revisited: A Closer Look at the Responsive Grid Generator

One of the most interesting and useful responsive grid generators around is a tool called Gridpak, which allows you to use a simple and fun UI to create fluid, media-query driven grids. We reviewed Gridpak around a year ago and came to the conclusion that, although useful, it came up short in the area of user friendliness when it came to implementing the code.

The developers have made some progress in this area and I think it’s about time we took another look. Join us as we dive into how Gridpak has improved its code offering and structure to provide a better, more streamlined experience for users.