Articles - Page 187

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

20 Fresh Sites With Amazing Scrolling Effects

Inspiration / 30 Jan 2013

20 Fresh Sites With Amazing Scrolling Effects

Scrolling effects are becoming more and more popular as a means of increasing interaction and user interest. Through clever background positioning, animations and a little JavaScript, you can bring your page to life in ways that will surprise and grab your users’ attention.

There’s a wide variety of tactics that you can use to create a unique scrolling experience on your site. Join us as we take a look at twenty fresh sites and how they use scrolling effects in different ways.

Top 10 Apps for Designers Right Now

Software / 28 Jan 2013

Top 10 Apps for Designers Right Now

If you are like me, apps are becoming an essential part of your workflow – from mapping out sketches, to gathering ideas, to taking notes and filing invoices.

But there are just so many options out there. How do you filter through them all to find applications that work for what you do?

I have a handful of “old faithful” apps that I use on my phone, iPad and online as well as a few app only tools that are rather new. By using a mix of software applications, I have been able to work more efficiently and hopefully save time. Here are 10 great apps for designers – some may be familiar but hopefully you’ll find something new that you love.

Check Out the New American Airlines Logo

Graphics / 23 Jan 2013

Check Out the New American Airlines Logo

American Airlines has had the same logo for forty-five years. That’s definitely a pretty impressive stretch! They’ve decided to hang up their Helvetica though and look to not only a new typeface, but a new eagle and even a new livery design.

Read on to see the logic behind the new design and whether or not I think it’s another chapter in a long line of recent brand redesigns gone bad.

Build a Fun True or False Quiz With CSS

CSS / 21 Jan 2013

Build a Fun True or False Quiz With CSS

I’m constantly surprised by what you can achieve using only HTML, CSS and a little ingenuity. I love to think outside the box and attempt creative experiments just to see if I can pull it off.

Today’s random challenge is to create a fun little true/false quiz. Questions will be presented to the user and answers will be revealed only on click. To make the magic happen, we’ll turn to some pretty crazy methods and use features like active, focus and even tabindex! You’re bound to learn some quirky stuff so hit the jump and follow along.

6 Awesome Emmet CSS Time-Saving Tips

CSS / 17 Jan 2013

6 Awesome Emmet CSS Time-Saving Tips

Emmet is one of the most useful text editor plugins that you’ll ever come across for developers. It has the seemingly magic ability to turn a tiny bit of work into a ton of code, which can save you an incredible amount of time and effort in the long run.

Previously, we took a look at some of the best features of Emmet from an HTML perspective, today we’re going to follow that up with some tips for how Emmet can improve your CSS workflow.

Code a Spinning Circular Menu With CSS

CSS / 16 Jan 2013

Code a Spinning Circular Menu With CSS

Don’t be a square, break outside your boring box and try on a circle for size. Today we’re going to build a circular navigation menu that spins to different points as the user hovers over an anchor.

Along the way we’ll have to overcome several obstacles like how to structure our HTML to be conducive to a remote hover and how to position all of the elements just right so that everything works. It’s a fun challenge and there’s a lot to learn, let’s get started!

Perform a Split Reveal With CSS

CSS / 10 Jan 2013

Perform a Split Reveal With CSS

CSS can pull of a lot of really great image tricks: size manipulation, desaturation, even blur. One limitation that we run into though is that you can’t really slice an image into multiple parts. For instance, if you wanted to cut a photo in half and animate the separation, you couldn’t really do it with pure CSS. Could you?

Today we’re going to code up a work around that allows us to achieve this very trick without an ounce of JavaScript or extra files. Let’s see how it works.

Create Outstanding Product Shots in Seconds With PSDCovers

Software / 8 Jan 2013

Create Outstanding Product Shots in Seconds With PSDCovers

Creating high quality 3D product mockups is a ton of work. I used to do print design work for various major store brands and I spent hours and hours toiling away in attempts to build attractive Photoshop mockups of various products.

If only PSDCovers.com had been around back then! This awesome resource is loaded with free packaging and product mockups that you can instantly apply your designs to in Photoshop. Sound too good to be true? Read on to see how it works.

Generating Placeholder Content in Sublime Text 2

Software / 7 Jan 2013

Generating Placeholder Content in Sublime Text 2

Everyone needs a little placeholder content now and then. Whether it’s a quick dummy image or a chunk of lorem ipsum, placeholder content can help fill the void when you need to flesh out a project but don’t necessarily have your pieces in place.

Today we’re going to take a look at how Sublime Text 2 can help you generate placeholder content automatically so you can save time and move on to the important stuff. Let’s check it out!

Photoshop to CSS Conversion: 3 Methods Compared

CSS / 3 Jan 2013

Photoshop to CSS Conversion: 3 Methods Compared

Converting Photoshop mockups to live web code is an extremely common practice among web designers. We’ve all done it a million times by hand, so it’s pretty exciting when we start seeing solutions pop up that will help us automate this process.

The latest version of Creative Cloud Photoshop CS6 has a built-in feature for converting Photoshop styles to CSS, and if you need another solution, there are two solid extensions that you can check out. Today we’ll compare the results of all three methods: Photoshop, CSS3Ps and CSSHat to see which is best.

Add Flair to Projects With Alternate Lettering

Typography / 2 Jan 2013

Add Flair to Projects With Alternate Lettering

Most typefaces have more than just 52 letters – 26 uppercase and 26 lowercase. They also contain an assortment of alternate characters that can help add flair and interest to your typography.

These special characters have been around since the beginning of type. Renowned typographer Johannes Gutenberg even used them in printing early copies of the Bible.

Invoiceable: The End of My Search for the Perfect Invoicing App

Software / 31 Dec 2012

Invoiceable: The End of My Search for the Perfect Invoicing App

I love getting paid, but I hate invoicing. It can be tedious, time consuming and even frustrating if you don’t have a good system in place. Long have I searched in vain for the perfect invoicing app that has the features I need without costing me a fortune.

Good news: I finally found it. Invoiceable is everything I’ve ever wanted in an invoicing app. It’s easy to use, the invoices are highly customizable and the service is free. Sounds too good to be true right? Read on to learn more.