Jake Rocheleau

Jake is a writer and user experience designer for both web & mobile. He has been publishing on the Internet for over 5 years writing tutorials on jQuery, CSS3, and PHP web applications. You may find out more information on his website or follow his recent tweets @jakerocheleau.





Business / 28 Oct 2011

How to Develop Task Management Skills as a Freelancer

The life of a freelance web designer varies in many ways to that of a corporate entity. Software firms and design studios are able to work together on big budget projects to earn a lot more than the average freelancer would. This often means when going solo you’ll work with a larger number of clients and have to divide your time up into unfair portions.

For anybody in the industry it’s absolutely essential to understand task management. Timing, repetition, sleep, nutrition, and a lot of other factors play a role in your work attitude. And by synchronizing yourself with natural rhythms and an upbeat schedule you’ll feel more productive throughout the day.

Layouts / 26 Oct 2011

Design Study Into Mac OS X App Websites

Apple has always demanded the highest calibre of work from its employees even since its founding in the late 1970s. Many designers have just recently moved into the OS X environment, and most fall in love at first sight. Mac OS X Lion offers so many features that you just can’t find elsewhere – most notably of which may be the App Store.

From here you gain access to a slew of applications both free and paid. These are all built for OS X Lion and can be downloaded directly into Launchpad. In this case study I’ll be looking into design trends for Mac app websites. These are specifically geared towards OS X and do not include iOS apps… the styles are very different. Along with these tips I have also compiled a small showcase gallery of my favourite Mac app sites to share a bit of inspiration.

Navigation / 25 Oct 2011

The Ins and Outs of Dynamic Navigation Menus

All web designers go through phases struggling with creative ideas. It’s a natural part of the creation cycle, but it can become frustrating as you’re stuck on a website project for more than a few days. There isn’t any one-size-fits-all solution. But we can take a moment to analyze the design process for better solutions.

The main goal of any website is to lead visitors through your pages. This is accomplished via a navigation of some type, most commonly links. You can build tab bars, banners, block elements, or even float a nav menu off to the side.

Follow us in the guide below as we look through common trends in web navigation menu design. Both designers and developers have come up with tricks for expediting the process of building websites. And we hope to do the same by offering some unique tips for UI navigation.

Graphics / 20 Oct 2011

Tips for Designing Sleek iPhone App UI Layouts in Photoshop

Graphic design for the web has been a popular trend for ages. And with the invent of Apple’s iPhone back in 2007 the app store has grown a tremendous amount. Now we have iOS app designers and developers coming together to build some really fantastic conceptions into reality.

But if you’re not fond of learning Xcode and programming Objective-C, Photoshop may hold more interest. Below I’ll offer some of the tips I’ve picked up for designing killer iOS app mockups. And since there are always new trends emerging the design community is constantly redefining how to create apps. Think of this as more of a beginner’s resource guide to designing for Apple devices.

Business / 17 Oct 2011

Running Your Internet Business With Google Products

Google has become a powerhouse industry for digital professionals. It seems just a decade ago Gmail was still a newcomer to the field. And now in-browser webmail is commonplace, along with IM Chat and file storage/upload in your browser as well!

For the average webmaster these tools provide a very powerful and free resource to setup as your backend. Google can be used to fuel your company and track visitor stats, revenue, plus tons of other metrics! We have gone over some of the most prosperous services and how you may benefit from them. With just a single Google account you have access to all of their apps completely 100% free. Talk about a sweet business deal.

Design an iPhone App Website Template With E-Mail Signup
JavaScript / 12 Sep 2011

Design an iPhone App Website Template With E-Mail Signup

If you’ve been on the scene with iOS then you’ve surely seen some of the beautiful app websites cropping up. These have been released over the past couple of years as developers have been looking for ways to attract marketing potential. There are a lot of very standard-looking templates out there for web designers – but my hope is to tackle something new!

Today we’ll be creating a styled iPhone App website template using HTML5/CSS3. This will not be targeted onto a specific app, so we don’t include a download link to the app store. Instead I’ve created a small e-mail signup form through MailChimp so you can hook early adopters into the app for pre-release. This is great for developers who need to get something up and running for their product before it’s on the market.

Code a Web Magazine Style Dropdown Navigation Menu
JavaScript / 2 Sep 2011

Code a Web Magazine Style Dropdown Navigation Menu

Frontend web development has grown into a very popular niche. With the expansion of jQuery more web designers are beginning to create fantastic animations and page effects. The possibilities are limitless!

In this tutorial we’ll be creating a magazine-style drop down nav menu. This will be created with some fancy CSS3 techniques to work in standards-compliant browsers. Even if you are shaky with jQuery you should be able to keep up with this little bit of code, and possibly learn something new. Check out the live demo script in my example.

Developing a jQuery Private Messaging Modal Box
JavaScript / 24 Aug 2011

Developing a jQuery Private Messaging Modal Box

You can build some really neat things using jQuery. The latest release bundle updates a lot of bugs and even hints at support for a new jQuery Mobile. With frontend scripting you can build practically any type of web application. But more specifically we’ll be looking into constructing a small modal box window.

I have designed the functionality to look and feel like a private messaging solution. This is perfect to implement on a user profile page or author’s page in a blog. We will be using some handy CSS3 techniques along with coding the page structure in HTML5. You don’t need to be a master jQuery artist to understand this tutorial, but it wouldn’t hurt to brush up on the basics. Check out my live demo example and download the project source code below.

Developing a Digg-Style Input Form With CSS3 and jQuery
JavaScript / 8 Aug 2011

Developing a Digg-Style Input Form With CSS3 and jQuery

Digg is one of the most popular social news networks to date. They garner a massive audience in the millions of members. Recently the company has carved a new direction with the launch of Digg v4. The entire system has been replaced with new statistics and followers/following networking.

One of the most notable changes is in page aesthetics. With the launch of Digg v4 boasts a brand new design with a unique look and feel. In this tutorial I’ll be going over how you can create your own Digg v4 style input form using some basic CSS3 properties.

Creating an Apple-Style Input Field With Display Labels
CSS / 1 Aug 2011

Creating an Apple-Style Input Field With Display Labels

Apple is a very popular brand in the new technological age in which we live. Both designers and developers agree that Apple’s products display exquisite talent and passion for their skills. Over time user interface design has taken a turn upwards and is now one of the hottest topics amongst web designers.

Below I’ll be going over how to build a small Apple-styled input form with some basic structure and scripting. All code included is based off XHTML Transitional Doctype along with newer CSS2/CSS3 techniques. We’ll also be using the jQuery 1.4.1 library to support our display label functions.

Adding an About the Author Box to Your WordPress Posts
PHP / 29 Jul 2011

Adding an About the Author Box to Your WordPress Posts

Digital magazines have become a popular commodity for today’s web users. With WordPress powering millions of blogs on the web today, it’s fair to assume they run a stable piece of software. Some of the best features are all internal as the WP team publishes live, updated documentation with each release.

Not only is the software very powerful but the underlying classes and functions give developers an all-access pass. It is extremely simple to develop apps and modules within WordPress. Today we’ll be looking into author meta data functions for building an “About the Author” box.

Creating Environments That Optimize Creativity and Inspiration
Business / 21 Jul 2011

Creating Environments That Optimize Creativity and Inspiration

Today’s article takes a look at how to help maximize creative thought by carefully structuring the environment around you. Everything from the design of your office to the specific hours of the day that you choose to work can play a key role in how effective you are when it comes time to actually get things done.