Style Tiles provide a fresh and productive way to approach the design process. They allow you to specifically hone in and focus on a project’s personality and mood without worrying about specific layout decisions.
Today we’re going to show you exactly what Style Tiles are, why you should use them and how to incorporate them into your design process. Follow along and you just might change the way you design forever.
It’s easy to get caught up in the big picture sometimes – what your whole site looks like or the message it conveys. Just as important though, are the small spaces. The look of your banner, sidebars and even the dreaded-in-some-circles above the scroll presentation can bring people into or turn people away from your site.
Effective design in restricted, and even constricted spaces can be the key to adding just the right flair to your site. Simple design tools such as cropping, color, text display and contrast can make all the difference when planning the design for the boxed-in spaces of your next project.
Apple is pushing the tech industry forward by increasing the pixel density on iPhone and iPad screens. This is great from a user’s perspective, but as a web designer or developer it literally threatens to completely change the way you build websites.
Are you ready for HD web design? Do you know how your sites will look on a new generation of high resolution screens? What steps can you take to prepare yourself and what skills will you need to stay relevant in the years to come? Read on to find out.
It’s time for another massive logo collection. This time around we’ve sifted through thousands of great logos to find over one hundred that were designed in a retro or vintage style.
If you’re looking for some good old fashioned logo design inspiration, this post will surely get your creative brain firing on all cylinders. From robots to muscle cars, these logos are flat out cool.
One of my favorite sites for design inspiration is Note & Point, which is a fantastic curator of great looking presentation decks (Keynote + PowerPoint = Note & Point). Not only is this site chock full of awesome design examples, most of their presentations are actually design and development related so you learn some great stuff along the way!
Today we’re going to look at five of my favorite Note & Point decks, which will teach us a ton of great stuff about presentation design.
Today we’re going to see if we can take a single image inserted via HTML and make it look like a messy stack of images using only CSS. The key: pseudo elements.
Along the way we’ll see how embarking on a project like this can quickly lead to some messy code and how we can combat that with some awesome DRY coding practices.
I love finding free tools that are capable of making my job (and yours) just a little bit easier. The web developer community is positively overflowing with talented people who are more than willing to share their creations with the world while asking nothing in return.
Today we’re going to look at one such tool from Erskine Design called Gridpak. With it we can quickly and easily generate our own responsive grid for building web pages that work well on lots of different screen sizes. It’s a little tricky to implement though so we’ll help you figure out how to set up your styles after you grab the download.
I was recently discussing the merits and various features of CSS preprocessors with a colleague. We covered all of the basics: how it’s great to have variables and how mixins can save you an incredible amount of coding time. When the conversation turned to some of the more obscure features though things got interesting. When I brought up the various color operations, my colleague boldly proclaimed that no “real designer” could ever find a legitimate excuse for using this feature and not picking his own colors manually.
In the words of Barney Stinson, “challenge accepted!” Today we’re going to create an awesome faux 3D text effect with pure CSS and then see why it’s a lot easier to do it with the color operations in Sass or LESS.
The other day a friend of mine said something that caught my attention, “I’m trying to learn how to slice a PSD.” It’s a simple enough statement. As soon as he said it, I knew exactly what he was talking about, and yet, there was something in there that didn’t quite set right.
Upon seeing my hesitation my friend responded with a question, “Do we still slice PSDs?” Great question! For beginners, jargon isn’t merely jargon, it implies a process and suggests a method of action. For this reason, it’s often helpful for more advanced developers to define their terms in a way that is meaningful to others. Today we’ll dive into the theory behind the process of converting a PSD to to a web page and end with a discussion on the ups and downs of designing in the browser.
Although Pinterest launched nearly two years ago, it has really hit the mainstream in the last couple months and is cracking top 10 website lists. The site, which allows users to “pin” or save their favorite images and videos on virtual boards by topic, had 40 times the number of visits in December than it did at mid-year, according to Mashable.
The site though can be a great place for designers to organize their thoughts and cobble together bits of inspiration. But you have to have a method to all the pinning so it does not become a time hog.
Building a website can come with a few unexpected hiccups, one of those being color. Understanding color choices, and how colors may render on different computers is the first step to ensuring that your site has the look you intended.
In addition to finding and selecting colors that work for you, it is wise to develop and manage a color scheme for your project. It is simple to create a set of swatches in common image software such as Adobe’s Photoshop or Illustrator and organize colors in such a way that they are easy to find and use.
Once upon a time we relied purely on Photoshop to create fancy image effects. These days though we’re turning more and more to pure CSS to add eye candy to our images. Applying custom image treatments using code makes for an infinitely flexible workflow that’s easy to tweak at any time.
Today I’ll walk you through creating some extremely simple and fun CSS image tricks. From polaroids to vignettes, you won’t believe what we can pull off.