Web Designer Wall - Design Trends and Tutorials

Interactive World JavaScript Map

Nick La — Thu, 30 May 2013 08:10:55 +0000

This tutorial will show you how to create an interactive map of the world you can use to display travel photos. In the process, you'll be introduced to Raphael.js. It is a small JavaScript library that makes it easy to work with vector graphics. Instead of using HTML5 Canvas for interactive animations, it uses SVG [...]

Two Free 2013 FITC Conference Tickets

Nick La — Fri, 22 Mar 2013 15:32:16 +0000

I've got two FITC Toronto 2013 tickets to give away and all you need to do is send one tweet for your chance to win! For those of you who don't know what FITC Toronto is, it is a design and technology conference that brings together some of the world's best digital creators for three [...]

CSS: Responsive Navigation Menu

Nick La — Thu, 24 Jan 2013 05:45:37 +0000

Previously I wrote a tutorial on how to make a mobile navigation for responsive design, now I've discovered a new technique to produce a responsive menu without having to use Javascript. It uses clean and semantic HTML5 markup. The menu can be aligned left, center or right. Unlike the previous tutorial where it is clicked [...]

Responsive Column Layouts

Nick La — Tue, 27 Nov 2012 05:59:14 +0000

Typically, to create a column layout, you would need to add the first or last classes to reset the margin space and clear the float. Today I'm going to share a very simple CSS trick to create a responsive column layout using nth-of-type pseudo class. I use this trick to code the WordPress themes at [...]

Viewport Meta Tag For Non-Responsive Design

Nick La — Thu, 11 Oct 2012 04:25:51 +0000

I'm sure you all are using viewport meta tag for responsive design, but did you know that the viewport tag can also be very useful for non-responsive design? If you haven't got the time to convert your design to responsive yet, you should read this article on how to use viewport tag to improve the [...]

Decorative CSS Gallery – Part 2

Nick La — Fri, 07 Sep 2012 06:06:03 +0000

Long ago I wrote a tutorial on how to make decorative image galleries using an extra <span> tag. It requires jQuery to append the span tag which isn't quite user friendly. Today I'm going to share a better method without using Javascript. The same result can be achieved by using :before or :after pseudo element. [...]

60 Beautiful & Creative Embossed Business Cards

Nick La — Fri, 17 Aug 2012 20:30:14 +0000

The previous post on creative business cards was very well recieved. Today we going to share another 60 well designed embossed business cards that stand out of the crowd. Embossing your business card is a great effect to grab your audience's attention, along with printing on different mediums, sizes of card and utilising complimentary techniques [...]

Two Free SCREENS Conference Tickets

Nick La — Wed, 01 Aug 2012 20:30:19 +0000

FITC is hosting SCREENS, a two day conference dedicated to development for mobile device and operating systems, this September 27-28 in Toronto. The conference features two full days of presentations covering a ton of topics relevant to iOS, Android, Windows Mobile and BlackBerry development including HTML5, NFC, PhoneGap, jQuery, responsive design and much more. Update: [...]

Photoshop CS6 = Better UX & Faster Productivity

Nick La — Fri, 20 Jul 2012 15:17:21 +0000

I've been using Photoshop CS6 for a while and I have to say that the interface and user experience is a big improvement. Instead of releasing more new tools, Photoshop CS6 put a lot of focus on the basics — the essential tools that we use very often such as crop tool, type, layer group, [...]

Featured on Offscreen Issue #2

Nick La — Thu, 12 Jul 2012 19:24:03 +0000

I'm honored to announce that I've been featured on Offscreen magazine issue #2. Offscreen launched its first issue in Feburary 2012 and quickly became well recognized in the design community. So I'm proud to be selected in the logbook section (thanks Kai Brach). I have five copies of Offscreen #2 to giveaway. As usually, post [...]

Expandable Mobile Search Form

Nick La — Thu, 28 Jun 2012 03:24:17 +0000

Previously I wrote a tutorial on mobile navigation, today I'm going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a [...]

Setting Breakpoints in Responsive Design

Nick La — Thu, 07 Jun 2012 04:30:53 +0000

Lately, I've been blogging a lot about Responsive Design. I've covered the technical side of media queries, basic implementation, full design tutorial, some CSS tricks, and a list of awesome responsive sites. Today, I want to talk about setting breakpoints in responsive design. How should you set the breakpoints? What is the general guideline? I'm [...]

Creating a Modern Lightbox with CSS3 and JavaScript

Nick La — Mon, 28 May 2012 05:00:07 +0000

Today we have a guest post by Andy Walpole sharing his experience from creating the Lightbox Ultra on Mozilla Demo Studio. Several years ago developer Lokesh Dhakar created the familiar Lightbox script with Prototype and script.aculo.us. It's smooth animation and sleek aesthetics were an instant hit in the web design community and it was used [...]

5 Useful CSS Tricks for Responsive Design

Nick La — Wed, 16 May 2012 14:04:57 +0000

Making the design to be responsive is very easy as shown in my Responsive Design in 3 Steps tutorial, but maintaining the elements to look aesthetically balanced on all breakpoint layouts is an art. Today I'm going to share 5 of my commonly used CSS tricks along with sample cases for coding responsive designs. They [...]

Giveaway from PSD2HTML

Nick La — Wed, 09 May 2012 15:37:10 +0000

If you follow Web Designer Wall, then you have noticed the PSD2HTML banner ad on the sidebar. PSD2HTML is not only my long time supporter, but they are also one of the most recognized vendors in PSD slicing services. Today I'm happy to partner with PSD2HTML to give away PSD to HTML slicing services to [...]

Free Base WordPress Theme

Nick La — Wed, 18 Apr 2012 03:36:33 +0000

Although WordPress has made it very easy to create a custom WordPress theme, but it still takes time to learn and build it. So I've created a Base theme based on the free Basic theme from Themify. I've stripped out the framework and the extra functions that you might not need. It includes only the [...]

Mobile Navigation Design & Tutorial

Nick La — Wed, 04 Apr 2012 05:45:42 +0000

One of the common challenges when designing responsive design for mobile is the navigation menu. If the site has many sections or pages, it gets challenging to squeeze all the items into a small mobile resolution. The navigation most likely ends up running into multiple lines or the buttons stacking on top each other. So [...]

Design Process of ShopDock

Nick La — Fri, 23 Mar 2012 04:38:46 +0000

Today I would like to share the design process of an ecommerce theme that I recently designed. Shopdock is an Ajax ecommerce theme where the user can quickly add/remove items to the cart with a single click. It is actually inspired by one of my sites, IconDock. The design process was quite challenging to make [...]

Montreal Meets Ticket Giveaways

Nick La — Tue, 13 Mar 2012 18:26:38 +0000

A friend of mine, Francois Hoang, is organizing a design conference called Montreal Meets in Montreal, Canada Apr 7, 8, 2012. The speakers included Fabio Sasso, Shelby White, Radim Malinic, James White, and Scott Hansen. I have two tickets to giveaway. Comment in this post before March 23rd, 2012 for your chance to win one. [...]

CSS Social Buttons

Nick La — Tue, 06 Mar 2012 07:36:05 +0000

I'm proud to announce my latest CSS experiment—The CSS Social Buttons. They are not another "pure CSS3" or "HTML5 canvas" icons. These icons use the basic traditional background-image technique. The purpose of these icons is to provide a cross-browser, consistent and versatile CSS that can be applied in any design, app or theme. Basically, it [...]