Articles - Page 167

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

20 Fantastic jQuery Web Type Plugins

JavaScript / 10 Dec 2012

20 Fantastic jQuery Web Type Plugins

In recent years, web typography has gone from an embarrassment to a point of pride. From CSS to JavaScript, we’re gaining great tools almost daily that help us implement awesome type.

Today we’re going to look at the best jQuery plugins around that are specially built to make web type more awesome. Download a few and take your type further.

Sketchpad to Screen: Testing Your Next Prototype With ZURB’s Solidify

HTML / 6 Dec 2012

Sketchpad to Screen: Testing Your Next Prototype With ZURB’s Solidify

ZURB, the company behind Foundation and apps Notable and Verify, has introduced a nifty new product in Solidify, which allows early-stage prototype testing.

What’s neat about the application is that it allows you to upload prototype images (from almost any stage of a project) and submit them for real user testing. And we’re not just talking finished designs here; you can actually upload and test based on a sketch.

Build an Adaptive CSS Modal Window

CSS / 5 Dec 2012

Build an Adaptive CSS Modal Window

This tutorial is yet another fun CSS project that helps you build something that you may have thought was only possible with JavaScript. We’re going to create a modal window that can be shown and hidden with a click that’s powered by a CSS checkbox.

To sweeten the deal, we’re also going to use a media query to ensure that the modal screen adapts well to smaller screen sizes. Let’s jump in and see how it all works!

Swap Your Page’s Background Image on Navigation Hover

CSS / 29 Nov 2012

Swap Your Page’s Background Image on Navigation Hover

I love the challenge of building something with CSS that uses one item to trigger another. It can get pretty tricky to wrap your mind around all of the pieces involved and come up with a way to flow your HTML in a way that is easily controlled in your CSS.

Today we’re going to embark on just such a challenge. We’ll build a basic home page that swaps out background images based on the link that you’re hovering over in the navigation. Along the way, you’ll learn all about the idea of remote hovers and how to wield them in your projects.

7 Great Tools to Help You Build Your Own HTML5 Forms

HTML / 27 Nov 2012

7 Great Tools to Help You Build Your Own HTML5 Forms

Forms can be one of the most complex aspects of your front-end development work. They’re far more complicated than most of the items that you’ll work with from both an HTML and CSS perspective.

If you’ve been frustrated with forms in the past, don’t worry, there is hope! Today we’re going to go over some tools and frameworks that help you get the job done without the headaches.

Ratchet: Prototype iPhone Apps on the Fly in HTML

HTML / 21 Nov 2012

Ratchet: Prototype iPhone Apps on the Fly in HTML

Ratchet is an awesome new framework that allows you to quickly and easily create prototype iPhone app layouts using only HTML, CSS and JavaScript. Simply create a container div in your HTML, toss in a few items with preset classes and you’re ready to go.

Follow along as we jump into Ratchet to see how it works. We’ll kick the tires, try out some features and decide whether or not it’s worth a download. (Spoiler alert: it is.)

Easel: A WYSIWYG Bootstrap Page Builder

CSS / 20 Nov 2012

Easel: A WYSIWYG Bootstrap Page Builder

Twitter Bootstrap makes creating complex page layouts a breeze. Drop in a few lines of HTML, apply a few classes and you’ve got yourself a decent looking, minimal working mockup.

Wouldn’t it be nice if things were even easier though? What if Bootstrap had a visual interface? What if you could build Bootstrap pages by dragging and dropping elements onto an empty canvas? With Easel.io, you can do exactly that. Let’s see how it works.

Hammer & Anvil: Two Unbelievably Awesome New Web Development Tools

Software / 19 Nov 2012

Hammer & Anvil: Two Unbelievably Awesome New Web Development Tools

Riot is a small software company currently comprised of only five people. Out of nowhere, this team has dropped two web development apps for Mac users that have blown me away. This is an app category that, in my opinion, hasn’t received much true innovation in recent years and apparently the good people at Riot are out to change that, because their ideas are truly unique and incredibly useful.

Today we’ll take a brief look at both Hammer and Anvil to see what each does and how they can collectively improve your workflow, particularly if you’re a front end developer working with static sites.

How to Create a Visual Brand for Yourself

Business / 13 Nov 2012

How to Create a Visual Brand for Yourself

Getting work is about more than your portfolio. Designers must also know a bit about marketing. This is especially true for freelancers. Your marketable self can, and will, help you land (or lose) work before it even hits your radar.

It is important to create a consistent brand for yourself today. Look at the channels you are using and how you are identified online, decide how you want to be identified and what your name and image should be, and then go out and make it happen. Here are a few tips to get you started.

A Beginner’s Guide to Zurb Foundation 3: The Grid

CSS / 8 Nov 2012

A Beginner’s Guide to Zurb Foundation 3: The Grid

In the past, we’ve discussed Twitter Bootstrap quite a bit. Much more so than its most worthy competitor: Zurb’s Foundation. Now on its third iteration, Foundation is a robust and responsive front end framework used by hundreds of developers every day.

Over the course of several articles, we’re going to jump in and take a look at its various aspects from a complete beginner’s perspective. Today’s topic is my favorite part: the grid. Follow along to see how it works!

WebZap: Beautiful Photoshop Web Mockups at Light Speed

Software / 1 Nov 2012

WebZap: Beautiful Photoshop Web Mockups at Light Speed

WebZap is an awesome Photoshop plugin for helping designers create high fidelity web design mockups faster than you ever thought possible. By combining simple one-click actions with robust customization options, this tool makes the entire layout process not only painless, but actually fun.

Follow along as we take a look at what WebZap does and put it through the paces to see how it performs. I promise, it’s the coolest Photoshop plugin that you’ve seen for web designers since GuideGuide.

The New Wendy’s Logo: What Went Right

Inspiration / 30 Oct 2012

The New Wendy’s Logo: What Went Right

Logo updates are a precarious business. One wrong move and you’ll have an angry mob calling for your head. This is especially true with brands that people have literally interacted with for the majority of their lives.

Today we’re going to take a look at just such a brand. Wendy’s, the self-proclaimed old fashioned hamburger joint, has a brand new logo. Spoiler alert: it’s great, especially when compared to the recent Arby’s update. So what went right here compared with what we saw with Arby’s? Let’s take a look.