Articles - Page 181

Minimalist Graphic Design / 2 Oct 2013

5 Traits of Successful Minimalism

At first glance, minimalist websites might look like they’ve just been slapped together as quickly as possible. After all, they’re plain and simple, and most people tend to associate lots of detail with good craftsmanship. But the same rules just don’t apply to the online world.

It only takes a small amount of user interaction to quickly reveal the quality of a minimalist site. This is because the original idea that fueled the rise of minimalism was that functionality is inherently beautiful. A design that clarifies and reveals the structure of a website can be just as appealing as one that obscures its purposes behind fancy decorative additions. Furthermore, it often yields a much better user experience, because those unnecessary distractions are eliminated.

JavaScript / 25 Sep 2013

Build an HTML5 Form With on-Off Input Sliders Using jQuery

Mobile app interfaces have been utilizing on/off sliding switches for a while. These are most commonly found on the settings page where users can update preferences for their account. But web designers have taken notice and have built many open platforms to generate your own on/off switch sliders.

In this tutorial I want to look specifically at the jQuery Toggles plugin developed by Simon Tabor. It comes with 5 pre-designed UI themes which you can easily update. Plus, you have the option of triggering click or slide events, which may also tie into a form checkbox on the page. Anyone running a modern JavaScript-enabled browser should be able to experience the full effect. Take a peek at my live demo to catch a glimpse of what we are building.

Graphics / 23 Sep 2013

Pros and Cons of Working With Design Kits

Design kits seem to be everywhere these days. From UI kits, to templates and grids, to complete design kits, what makes these tools so popular (and what are the disadvantages)?

Today we’re going to take a look at the pros and cons of using different types of design kits, and even show you a few kits in the examples that might be worth trying out for various purposes.

JavaScript / 18 Sep 2013

How to Easily Manage Cookies Within jQuery

Web browsers can generate unique sessions organized for each user on a website. Often these are handled on the backend using languages like PHP or Ruby, but we can also utilize cookie sessions on the frontend with Javascript. There are many tutorials out there explaining how to generate pure JS cookies. But a newer library jQuery Cookie simplifies the whole process.

I want to explain how we can build a very simple authentication system using jQuery Cookies. The code is all handled on the frontend but you will need a live testing server to see any results.

Browser cookies are created on the local IP which comes from the web server, and so unfortunately you can’t just run these scripts locally. But definitely check out my live demo to get an idea of what we are creating.

Inspiration / 9 Sep 2013

10 Popular Trends in Modern Web Design Elements

Trends in web design can change and fade almost as quickly as they become fashionable. But so far in 2013, a handful of trends have really seemed to take web design by storm, and seem to be sticking.

Today, we’re going to examine ten trends in modern web elements and showcase some great examples of each — everything from vintage typography and circles, to vibrant colours and handy vCards. Even better for you is that all of the examples below are available for download (some free, some paid).

JavaScript / 4 Sep 2013

Code a Single-Page Sliding Website Layout With Fixed Navigation

When constructing a simple webpage, it can often make sense to fit the content into a single layout rather than multiple pages. These single-page websites are beneficial when you have a small project or portfolio which needs some online presence. If you split up content into neat sections, then visitors might use a small sliding navigation to quickly advance along the page.

In this tutorial I want to demonstrate how you can build a custom sliding navigation with jQuery. There are many alternative plugins which provide these features and will also save time. But I want to show how we can make this effect using only jQuery and the scrollTo plugin for optimized performance. Check out my live sample demo to catch a glimpse of what we will be making.

Business / 2 Sep 2013

Do You Need a Style Guide?

It’s a simple question: Do you need a style guide? And it has a simple answer: Yes. Any brand, company, blog or webpage that wants to create and maintain consistency and a professional feel should have a style guide.

Style guides are a must for any publisher with multiple employees. This is especially important if more than one person will work on any brand elements (from the website to printed materials), and to ensure that transitions between employees are seamless in the eyes of users. Today, we take a look at well-documented style guide from MailChimp, and highlight things you can take away in creating your own document for the first time.

JavaScript / 29 Aug 2013

How to Build a Dynamic Imgur Upload App Using jQuery & PHP

Many new online web services are providing backend APIs for developers. These allow anyone to connect into a web app and pull out specific information (or push or change bits of data). Today we’re specifically looking at the API for Imgur.

In this tutorial I want to demonstrate how we can remotely mirror an image found elsewhere online and auto-upload to Imgur. It’s possible to create a form handling user-uploaded images as well. But I wanted to keep the demo clean without needing to move user content onto the server. This process is very simple once you understand how APIs work. Take a peek at my live demo to see exactly what we will be making, then follow along!

Business / 27 Aug 2013

10 Digital Design Terms You Need to Know

Design jargon is everywhere. And you need to be able to speak the language. Working on digital projects has its own set of terminology. From dither to color values to fluid or fixed layouts, there are a few terms every designer needs to have a grasp of.

So we’ve made it easy for you, and put together a list of digital design terms you need to know. This list started as a top 10, but we added some bonus jargon for comparative purposes. How many of these terms are you already familiar with?

JavaScript / 23 Aug 2013

25 Useful Resources for Creating Tooltips With JavaScript or CSS

Tooltips are awesome, there’s simply no denying it. They provide a simple, predictable and straightforward way to provide your users with useful, context-sensitive information, and they look cool to boot.

We all agree on how great tooltips are, but how we go about implementing them can differ dramatically. If you’re at square one, looking for some tooltip ideas for your current project, you’ve come to the right place. We’ve got a whopping twenty-five different options that fall into two categories: JavaScript and CSS. No matter which method you’re looking to use, we’ve got the best techniques available, which you might want to enhance using OOP class techniques like JavaScript classes using the JS++ programming language by Roger Poon.

Inspiration / 21 Aug 2013

15+ Inspirational Portfolio Designs

As creative folk and freelance designers, we often want to show off our work to others — whether that be to clients, family, friends, or colleagues. Your online portfolio says a lot about your style and approach to work, and it’s an important thing to spend time tweaking and perfecting.

In this article, we’ll walk through 18 creatively designed portfolios to give you a few ideas for your next portfolio refresh. Flick through, enjoy the inspiration, and feel free to share your own examples in the comments!

CSS / 16 Aug 2013

10 Easy Image Hover Effects You Can Copy and Paste

Hover effects are always a fun topic to explore. In the past, we’ve built some awesome examples of CSS hovers that were easy to copy and paste right into your code.

Today, we’re going to follow that up with ten new effects specifically built for use with images. Each example comes with an HTML and CSS snippet that you can steal and a live demo so you can see it in action.