Articles - Page 162

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

JavaScript / 24 Jul 2013

Create a Simple jQuery Image Lightbox Gallery

When building your own WordPress theme, there are a number of items to consider. One such page element is a dynamic image gallery, either using a lightbox or some type of sliding panel. Both of these user interfaces mesh nicely into the content of an article. Since they can both work on typical websites it is nice to have the code ready for use in any other blog theme.

For this tutorial I want to focus on using the lightbox effect with a plugin called jQuery lightBox. This is very easy to setup and get customized on your own website. Granted there are a few awkward fixes within the CSS, but overall the plugin works perfectly. There are even some alternate parameters where you can specify properties like the animation speed or background opacity.

Mobile / 22 Jul 2013

The Importance of Designing for Readability

Text is not an afterthought in the design process. It should be your first consideration.

Readability should be one of the top concerns when it comes to any design project. If text can’t be read, then why are you designing in the first place? Good design delivers content in a way that is understandable; readability is a big part of comprehension. Today we’ll be discussing how you can plan a design around the words, so that your projects are easy to read.

JavaScript / 15 Jul 2013

Coding an Ajax-Style Paged Document Viewer With jQuery

Recently, I’ve have seen a number of websites using this JavaScript-powered paged document interface. Users are presented a multi-page document set starting on the first page, and they have the ability to switch between pages dynamically. This can be a much better solution than linking directly to a PDF document. Or this may even be an alternative where you have a PDF download link, plus the embedded document images for easy access.

In this tutorial I want to demonstrate how we can build a small script which handles any set number of documents. The JS code is a little bit tricky since we need to adapt for a large number of pages. However it is not very difficult to customize and get the design looking exactly as you would need it! Check out my sample demo below to get an idea of what we will be creating.

Graphics / 11 Jul 2013

Understanding Color: Dominant vs. Recessive Colors

Ever wonder why your colors don’t look quite right in some situations? It could be a simple as the color choice. Certain colors tend to take on the characteristics of other hues, while others always look pure. In addition, the human eye perceives color in different ways based on whether it is in the foreground or background.

This phenomenon can be explained through dominant and recessive colors. Join us as we take a closer look at these two terms today, and delve into deeper understanding of how they can guide your design choices and decisions.

Graphics / 8 Jul 2013

Using Moo.com for Your Wedding Stationery

Weddings can be an expensive business. Photographers, venues, food, drink, entertainment, and all manner of other things to consider. But it’s also a fun opportunity for some design work! Wedding “branding” and stationery has the potential to be another big wedding expense, but by thinking a little creatively, you can not only give your special day a personal touch, but also cut down on the cost.

Today I’ll be sharing a little insight into how you can use your copy of Photoshop, and Moo.com, to create a fantastic array of different wedding stationery. We did it for our wedding a couple of weeks ago, and it went down brilliantly.

CSS / 3 Jul 2013

Create a Hidden Sliding Navigation Bar Using CSS3 Transitions

Typically web developers have been using JavaScript to create dynamic page animations. Hidden menus and subnavigation are just a couple examples for how these techniques would be used on a live website. Thanks to the addition of CSS3 transitions we can now mimic these animations, with no JavaScript in sight.

In this tutorial I want to demonstrate how to build an inner hidden content bar which slides down when hovering. You can place this into your header, footer, or even somewhere inside the page content. It is a very flexible technique which does not require a whole lot of time to get working. Plus all the modern web browsers will support CSS3 transition effects.

Inspiration / 1 Jul 2013

10 Key Features of Popular WordPress Themes

WordPress is the framework behind many of the websites and blogs you visit every day, including this one. Latest numbers from WordPress attribute the framework as the backbone of 17 percent of the web.

The platform is simple to use, and thanks to plenty of theme builders it can be customized in a variety of ways for everything from blogs, to portfolio sites, to e-commerce. Themes are the element that take WordPress to the next level, giving almost anyone of any skill level the ability to create a site that doesn’t look like a basic template. There are a few key components that set the best themes aside from the rest. The most popular WordPress themes – both paid and free – tend to have 10 key features in common. Let’s take a look at them.

CSS / 29 Jun 2013

Create Shaped Avatars With CSS and Webkit

In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past.

Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Let’s see how.

CV & Resume Templates / 24 Jun 2013

How to Design a Resume That Stands Out

Resumes are everywhere. They can be good, bad or downright embarrassing. But one thing is certain — if you want a job, yours must stand out in a good way. The design needs to reflect your personality, and the information needs to be organized, relevant and spot-on.

More often than not in today’s job market, you may even have several versions of your resume; one tailored toward different types of companies, one for potential clients or another as a showcase piece in your portfolio.

CSS / 21 Jun 2013

What the Heck Is CSS Specificity?

CSS specificity is a topic that many new front end coders avoid for as long as possible. It sounds complicated, there are all of these rules, you might even have to do some math! How lame is that?

Ultimately, you can only avoid it for so long. Specificity is an essential concept that you need to grasp to be an effective developer. Today I’ll walk you through the concepts of specificity in a simple and easy to understand manner. It’s easier than you think!

Business / 19 Jun 2013

Understanding Agile Design and Why It’s Important

It’s no secret that the agile development process has been hurtling through the development world for several years now, swatting aside the older, clunkier waterfall development method. To be fair, whether it was agile or something else, waterfall really had it coming, as its risk-averse, top down approach just can’t keep pace with the demands of today’s marketplace.

While similar changes are occurring in the design world, the agile design process should necessarily look and feel a little different than agile development; they are, after all, different disciplines. Let’s take a deeper look first at what agile development is, and then at a few great ways to adapt the process to the design world.

JavaScript / 17 Jun 2013

Create a Simple Autocomplete With HTML5 & jQuery

A quick Google search will yield plenty of handy autocomplete plugins — there’s even an option shared by jQuery UI which comes bundled with the library. However today I want to look into an alternative solution. The jQuery Autocomplete plugin released by DevBridge has the exact functionality that I find most appealing.

The styles will automatically highlight words as you are typing, and results appear in the dropdown menu at the bottom. This tutorial is a brief introduction to using the plugin by loading content from a JavaScript array. It is possible to load Ajax content from a backend file or from content out of the database, however for this tutorial it is easier to work with local data. Check out my sample demo to get an idea of what we are trying to build.