Browse hundreds of articles, tips, and inspiring design collections. Find helpful design advice, or the perfect resource for your next project.
It’s been a while since we polished our HTML and CSS skills with a fun little demo, let’s end that streak with a project that’s both super attractive and super practical.
Today we’re going to build a card-style “Hire Me” widget that you can quickly drop onto any web page. Along the way we’ll learn a bunch of great stuff about CSS positioning and how to use pseudo elements to pull off some cool effects.
True gamers don’t just want to enjoy only the game’s experience; they want to know who makes the game, the video game company history, and the inspiration behind a video game. With the video game’s creativity and art comes an inspired art on it’s own: the video game website.
Video game websites are often unique and creative — rich with graphics, sliders, images, videos, leader boards and more. They also have to give the first impression for a game, as a video game website generally launches a while before the game is released. Let’s look at some of the best designed and developed video game websites created over the past couple of years.
Of late, you may have noticed a crop of new site designs have a softer and lighter look. After all the rainbow brights and even neon or fluorescent hues that have been so popular of late, it seems that some designers are taking a more subtle approach by using lighter or muted colors.
Although the same basic treatments are still being utilized — like colorized photography or color blocking — the new hues are making for a more refined and understated variation on these themes. Today we’re going to delve into this trend a little more, and explore various design examples and approaches.
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.
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.
The concept of “flat” design is fairly prevalent at the moment and, although you should never stick with a trend just because it’s the “in thing”, there’s certainly some merit to stripping back unnecessary design flourishes and focusing on the basics.
Today we’re featuring seven freebie packs that can help to give you a useful starting point when designing something with a flat, minimal look and feel. From icons to complete web templates, there’s plenty to get your teeth into!
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.
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.
We’re excited to bring you another great competition today, from Markup-Service.com, who are giving away $500 worth of their services. It’s a great chance to save your time and energy on coding and get clean, valid and fast-loading markup developed.
Read on to find out a little more about how to enter — it just takes a couple of seconds!
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.
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.
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.