Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.
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.
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.
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).
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.
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.
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!
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?
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.
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!
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.
The typical process of creating a dynamic feed listing requires some type of backend language. Obviously this can work out fine if you are familiar with Rails or PHP, but I want to present a method for pulling RSS feeds via jQuery. The problem is accessing Ajax requests from an external server and then converting this XML information to something a bit easier to read.
We will be focusing on the Google Feed API which is a lot easier than it looks. There are a number of custom possibilities to play with the options and access other alternative themes. All we need to pull is the first page of the feed item results, along with each title and the URL link. Once you have this script working it is very easy to customize the layout and even include a bit of content from the feed! Check out my sample demo below to get an idea of what we will be creating.
More designers are working across platforms these days, switching back and forth between print and digital projects. Although much of the theory is the same, in practice there are a lot of technical differences when it comes to working on something that will be printed versus a website. It takes a specific set of knowledge and skills to work effectively and efficiently in both environments.
But it is possible. Here we share eight tips for print designers making the switch to digital projects. (And I can vouch for every single tip as a designer who has made the switch.)