Design posts

Hidden away in the depths of the CSS specification you’ll find CSS counters. As the name suggests they allows you to count a thing on your page with CSS incrementing the value every time it appears on the document.

This is principally useful if you have a tutorial website — whether that be about cooking or web development — they all have steps to follow, and you’ll most likely have to write the step number before the actual content. CSS counters can help by doing that automatically, you can even use it to count the images on your file and add figure numbers...

In part one, we touched on how to harness the power of display: flex in your website layouts, and how versatile this new layout concept has proven to be. With those thoughts from the previous video kept in mind, we can now adapt the process and use it as part of a responsive design.

Responsive design allows the user to view a layout considered and targeted specifically for the platform they’re viewing the page on, and in today’s tutorial, I’ll be using the flexbox markup to show you help you create dynamic, malleable layouts for all devices, utilising traditional media queries used frequently in responsive design markup.

We’ll...

The side project series is a series of posts in which we’ll be taking a look at the best of designers’ side projects. To get things started, this week we’re going to be looking at Type Fight, a side project by designers Drew Roper, Ryan Paule and Bryan Butler.

Type Fight plays host to weekly “fights” in which two designers are asked to create a typographic treatment of the same character and then have their final designs voted on to determine whose is best. So far, Type Fight has hosted 61...

The May edition of what’s new for web designers and developers includes new web apps, jQuery plugins and JavaScript resources, educational resources, wireframing kits, image tools, Photoshop extensions, web development tools, coding resources, and some really great new fonts.

Many of the resources below are free or very low cost, and are sure to be useful to a lot of designers and developers out there.

As always, if we’ve missed something you think...

One of the most important tasks on your plate as a web designer is usability. Usability is defined as a gauge of the quality of the user’s experience when interacting with your website. Any website you design should always be seamless from the standpoint of the user. They should find your site easy to navigate without having to first undergo special training. Usability is normally based on several different factors.

A person looking through your site wants their ease of learning to be top-notch. They’ll want to quickly learn the user interface so that they can jump right in and accomplish fundamental, navigational tasks. Efficiency of use is another factor: after they’ve learned to navigate your site, they’ll want to accomplish tasks speedily. Even if the user has used the site before, they’ll need to easily remember enough of the process to be able to use the site effectively the next time. This is called memorability. When they’re using your site, they may experience some errors, but are these errors frequent...

With every new revision of CSS, a plethora of new, exciting attributes come to light;  one of which being the understated display: flex approach.

The flexbox layout model has been floating around the web for a little while now, each time with its own variation on the approach (some outdated, such as the display: box or display: flexbox method).

In...

The most frustrating aspect of web design for designers trained for print, is the persistent lack of typographic control.

Careful typographic choices are the hallmark of quality work and the lack of that quality online never ceases to be jarring for those of us that know what we’re looking for.

Fortunately, the level of control that we have is increasing all the time and support for more advanced typographic rendering is also increasing. Whilst it’s certainly not possible to deliver the kind...

I first took notice of flat color web design when Google started to redesign their sites. This was during a time when gradients and drop shadows were all the rage. In using what was then Google Docs and my Google Calendar, I always realized there was something better and more user friendly about these sites but I never could put my finger on what it was. I just continued to enjoy and use the services as needed.

Eventually, I think I was just messing around with the apps when I finally noticed the buttons had no gradients and the icons didn’t either. There were no drop shadows and really nothing but flat colors and lines to separate...

Lovers of abstract art are undoubtedly familiar with the superlative Wassily Kandinsky — the Russian-born painter, printmaker, and theorist who was recognized as having painted the first purely abstract compositions in modern art history. As a tribute to the pioneering expressionist, Turkish graphic designer Sinan Buyukbas has created a series of stunning 3D typographic art — aptly titled “Kandinsky Type” — to reflect Wassily Kandinsky’s groundbreaking style.

Using bold, striking hues and funky shapes to craft the letters, Buyukbas states he approached each character as a blank canvas, channeling the creative mojo of Kandinsky with both color and form. In fact, one look at the painter’s work known as “Composition X” (1939) makes it easy to see where Buyukbas got his inspiration.

Free-spirited,...

It’s rare that you find a typeface with both legibility and character; the latter often obscures the former.

So you’d be wise to take advantage of our sister site MightyDeal.com’s current offer on the beautiful Solomon font family.

The family includes 2 different styles in 6 weights, 12 fonts in total. The first style is a utilitarian san-serif, easy to use for body text and is somewhat reminiscent of...

We’ve talked about ‘Contact’ pages. We’ve talked about the ‘About’ page. You know what to put on these pages because, hopefully, you’ve thought long and hard about it. And you know exactly what to put on the inside pages, because you have your content for those as well. You think you’ve got it all covered, right?

Think again! You have the opportunity to design and make use of your 404 error page. And quite frankly, you’re not a cool kid if you don’t have a super cool 404 page. Why do we go...