Open/Close Navigation

Articles by ‘Jake Rocheleau’

What’s The Best Mouse For Designers?

Digital designers spend a lot of time at their computers. One of the most used tools for design is the mouse, and while you don’t need flashy features you do need a mouse that’s ergonomic and reliable.

I’d like to cover a few models that are highly rated as the best mouse for designers. There isn’t any single right answer here because everyone has their own preferences. But when reading about the subject you tend to find certain patterns, and certain mice come up more often than others.

The following mice are the most recommended options from designers with a few specialty devices added into the mix…

Read More »

Tips For Designing Memorable Brands With Simple Logos

Recognizable brands seem to come out of nowhere. One minute they’re completely unknown, the next they’re one of the biggest brands on the planet. This happened with Tesla and Snapchat, and it’s plausible we’ll see similar results in the coming years.

Granted a brand is only an emblem for a product. But if you already have a great product, how should you design for recognition? There is a sense of beauty in simple logos that convey their ideas without much effort.

In this post I’d like to delve into simpler logo designs to see how they work and what makes them so recognizable to a wide audience…

Read More »

UI/UX Wireframe Examples & Design Analysis

There are dozens of ways to build interface wireframes ranging from pencil & paper to a handful of digital tools. But no matter what means you use to create wireframes, your process should always be similar with a direct end goal in mind.

For this post I’d like to examine wireframe examples and how they play into the process of creating a wireframe. There are specific measures you can take to ensure quality wireframing without extra confusion. In this post I’ll detail some of these methods and break down pieces of the wireframing process…

Read More »

Ultimate Guide To Foundation For Emails

Email layouts have always been finicky and difficult to work with. But email frameworks like Foundation for Emails can make a world of difference in regards to browser rendering, responsive grids, and dynamic features powered by toolkits like Gulp.js.

I recently covered a guide to Foundation for Sites and in this post I’d like to delve into Zurb’s newest email framework. Foundation for Emails is just as flexible and powerful with an onslaught of tools made to improve the email design workflow…

Read More »

Working From Home: Staying Productive As A Freelancer Or Contractor

When your home is your office it can feel like you’re caught up in the same activity day-after-day. Weekends can blur with weekdays. Family life and work life can also become fuzzy.

There’s no doubt that working from home provides immense flexibility and a high-quality way of life, but only when managed properly. If you’ve never had to work from home or if you just want to learn how to do it better, this post is for you…

Read More »

Ultimate Guide To Interaction Design For Websites

Modern designers hear a lot of titles thrown around, most of which are moving away from the general “web designer” into specialists like UX designers and interaction designers.

Job requirements vary between companies but an interaction designer generally falls into the category of a UI designer with some UX knowledge as it relates to interaction. This can relate to user flows, animations, and interface features that improve the interaction design process…

Read More »

The Creative Brief: What It Is, How It Works, And Best Practices For Designers

Starting a new project with a client can be a daunting task. You want to deliver quality work and create something they love, but you don’t want to be micromanaged. This is where the value of a creative brief comes into play.

Creative briefs are often used inside agencies to pass ideas onto designers and copywriters. But freelancers also use creative briefs for themselves, and similarly to gather information from the client. These briefs are like project guides to help designers create something that best connects with the target audience.

Let’s delve into the subject of drafting a creative brief and learn how it should work in action…

Read More »

Sequential Landing Page Animation Effects with CSS3

Custom animation adds a certain vivacity into website layouts. Web animation gives off the illusion of motion, and brings a page to life with dynamic moving parts.

I set out to create dynamically-animated elements that would chain through a series of events once the page finishes loading. This can be seen on many product pages and landing pages with elements like demo screenshots or feature lists.

In this post I’ll show how to use CSS3 animations triggered by jQuery to create sequential page effects. Every element on the page is hidden by default, then animates into view one after another. Check out my live demo below to see how it all works…

Read More »

Hero Image Design Tips For Natural-Looking Website Layouts

The concept of a hero image isn’t new to web design, although the term was coined somewhat recently. These hero images are basically banners often placed in the background of a header behind some content. The photos promote the page’s content and drive people further into the layout.

Heroes are like an introduction to a website’s content. Photo choice is vital and quality plays a big role. But how do you create pages with hero images that actually look natural and work to promote a website?

In this post I’d like to distill some knowledge of design trends and photo resources for building quality hero images. If you’re already a skilled designer then you’ll understand composition for interface design, but may struggle with the ideas behind hero images: how do they work and where do they work best? Let’s delve in and find out…

Read More »

Learning How To Code: Top Premium Resources and Web Courses

Coding can be difficult to learn by yourself. Whether you’re just starting the basics of frontend development or want to pickup Node, Laravel, or Rails, it takes time.

The process of learning how to code can be a struggle. But you don’t have to figure it all out by yourself.

I’ve collected some of the highest-rated online resources for teaching yourself how to code. This post includes everything from HTML/CSS, PHP/MySQL, JavaScript + Node, and even app programming like Swift for iOS…

Read More »

Call To Action Design: Trends and Best Examples

Every great landing page or guided web experience has some call to action element. This could be a button, signup form, settings menu, or anything that gets the user moving through a predetermined experience.

I’d like to examine design features and trends that can be used for better call to action design elements. There are many case studies and research articles detailing CTA action, but few cover the overlap between design and marketing…

Read More »

Graphic Design Games For Having Fun While Learning

Who says games can’t be educational? Though I’ll admit when I hear the concept of a design-centric game I rarely assume it’ll be fun. But after scouring the Internet for web games I’m surprised how many are out there, specifically with a focus on digital design concepts.

So I’ve organized this post on graphic design games that you can play right in your browser for free. These are fun and educational games that teach design fundamentals, or just improve your sense of design knowledge…

Read More »

Ultimate Guide To Facebook’s Open Graph Protocol

Facebook first introduced open graph in 2010 and since that time it has been used to define digital objects all over the Internet. Websites, movies, and even locations can become “rich objects” in this social graph powered by Open Graph(OG) metadata.

But what exactly is Open Graph? And why would you want to use it on your website?

In this post I hope to shed some light by answering that question. You’ll learn about OG implementation and how metadata can be used to power social network sharing features. If you’re a webmaster or blogger who doesn’t understand how Open Graph works, this post has everything you need to know…

Read More »

Logo Evolution: The Growth Of Corporate Logos

There’s a lot to learn by studying the logo evolution of major brands and well-known products. Trends change all the time and they can lead to radical design changes across societies and cultures.

I’ve looked into some of the world’s largest companies and how much their logos have changed over time. We can learn about design techniques, cultural history, and perhaps even conclude some ideas regarding the future of logo design…

Read More »

What Is Ajax & How Is It Used In Modern Web Development?

When I first started web development in 2006 the term Ajax was mentioned in whispers by professional circles of developers. These were the beginnings of a revolutionary concept that have shaped the way websites call HTTP data and load it onto the page.

In this post I’d like to answer the question of what is ajax and how can it be applied to modern web development. A lot has changed in the past decade and Ajax is now the most common way to build dynamic web applications.

But it helps to understand the history of Ajax and the problems it solves before applying it to your live web projects…

Read More »

Progress Bar Design: Examples and Open Source Code Snippets

Speed and efficiency are two major aspects of quality web and mobile interfaces. Extra time on page can be annoying and most people just want to get moving. This impatience can be abated with the use of progress bar elements on the frontend.

Users always hate excessive waiting. But it helps if there’s some sort of indicator for tracking progress.

I’ve already covered great tips for selectable menus and in this post I want to focus on progress bar interface patterns, both for data loading and progression steps like form inputs. I hope these trends can help designers and developers with their own progress bar design ideas…

Read More »

Awesome Backgrounds for Web Design Inspiration

Every website has its own unique style and relevant design properties. Unique backgrounds aren’t often found in minimalist designs, but other styles use some incredible website backgrounds with bold design techniques. I’ve cataloged a handful of these awesome backgrounds to help designers find ideas for their own background designs. Whether you’re looking for vector backgrounds […]

Read More »

Unique Mobile Designs: A Collection Of Mobile App Interface Patterns

Every designer borrows ideas and remixes them to fit their project. This has been going on for centuries and it continues because it works. The key to a stand-out interface for unique mobile designs is to study patterns and apply whatever works best.

In this post I’d like to cover a handful of novel interface designs for mobile applications. These ideas are not always applied to real interfaces, but they represent the mockup stage for interactive experiences. Use these ideas to create your own projects with a pinch of ingenuity and flair…

Read More »

Ultimate Guide to Facebook Instant Articles

Facebook users are in for a real treat with the addition of Instant Articles. This new product is more of an ancillary update to the FB timeline feed for external content. Instant Articles was developed to enhance articles and improve speed right from the Facebook feed. Users don’t want to wait around for content to […]

Read More »

Top Photoshop Alternatives for Digital Design Work

Digital design offers more career opportunities with each passing decade and more software is being created to meet the demand. For over 25 years Photoshop has been the industry standard for compositing, photo editing, and UI design.

But recent years have shown a number of Photoshop alternatives that hit the ground running.

While Adobe is still a major contender in the design software marketplace, these alternate programs may be cheaper and better-suited for your needs…

Read More »

How To Build an HTML Contact Form

A big challenge when coding an HTML contact form is choosing a reliable backend language. There are a ton of different options that we’ll cover today, including a couple of tutorials. In one tutorial I’ll explain how to build a contact form reliant on MailThis as a backend. You don’t need PHP or Python, or even a web […]

Read More »

Top Interview Questions for Design and Development Jobs

Companies always need quality designers and developers, moreso now than ever before. But it takes more than just skill to land a job. You need to fit the company culture, offer unique value, and maybe even have some connections in the field.

I can’t help with everything but I can help with the crucial interview process. Employers ask questions to learn about you and your skillset, so the way you answer these questions will prove imperative to your success.

This guide will help both designers and developers prepare for top interview questions when applying for tech jobs. This post isn’t exactly about specific questions, but more about how to think to be prepared for any question…

Read More »

Abstract Background Images, Free Mega Bundle and Resources

Hundreds of design resources can be found online to improve any web or mobile UI project. Finding quality abstract background images, vector graphics, tileable textures and other resources can be a time consuming process.

Abstract backgrounds give a more creative feeling to a website while still placing content front-and-center. Learning how to make abstract backgrounds requires time, but you can shave down that time if you have quality resources to work with. Scroll down to the end of this post and you’ll find a list of websites I’ve found that are dedicated to design resources for web and mobile projects – many of which can apply to abstract background design if you know some creative techniques.

Before I get to the list of websites, we have a few free abstract background images for you to download and use in your designs…

Read More »

Chrome Developer Tools: Best Videos, Courses, and Add-ons

Building a workflow with Chrome Developer Tools requires patience and practice. But if you have a solid direction with helpful resources you can mitigate the time it takes to implement DevTools into your daily workflow.

This post offers everything you need to start learning and and applying DevTools to your web projects. All the resources in this guide are free unless stated otherwise. And new resources constantly pop up online so be sure to keep your eyes peeled…

Read More »

Maya Tutorials for Beginners

The field of digital design covers a whole lot more than just interfaces. Graphics creation and 3D modeling are becoming incredibly popular, both of which can apply to digital animation like After Effects projects.

One of the best 3D modeling programs is Maya by Autodesk. Learning Maya requires a lot of patience and practice, but it’s definitely worth the effort if you want to do 3D modeling or digital rendering.

This post will cover the best Maya tutorials for getting started with the program. Some tutorials cover more intermediate subjects while others stick to the absolute basics. The key is to just get started and never stop learning. You’ll be surprised how much progress can be made in just a few months’ time…

Read More »

Must-Follow Illustrators and Designers on Instagram

Instagram uploads millions of photos every single day. Many of these are personal but others are posted to showcase work in various creative fields. Web designers and digital artist especially like to share their work on Instagram, the largest photo sharing social network.

I’ve collected some of the best and most active designers on Instagram worth following for some creative inspiration. These are designers and illustrators that not only produce great work, but also have a unique voice and passion for what they do…

Read More »

Food Logo Designs for Identity Inspiration

Modern identity design is a detailed subject with many moving parts. The techniques and styles vary whether you’re designing a bar logo or in this case a food logo.

I’ve collected 25 stunning examples of food logo designs for creative inspiration. These logos include restaurants and specialty shops with vector icons and characters to improve brand recognition. Whether you’re designing for a client or scouting ideas for your own project, this gallery is sure to offer a great starting point…

Read More »

Custom Digg-Style Animated Voting Badge

Anyone that remembers Digg will also remember the site’s revolutionary voting system. Although it doesn’t seem like much now, their Ajax-based vote interface was truly impressive back in the time of its inception(mid-2000s). Digg has long since been sold & shut down yet the mark it left behind still remains. In memory of Digg’s classic […]

Read More »

URL Encode/Decode Webapp with jQuery

Most developers will know of URL encoding as UTF-8 encoding. This converts non-ASCII characters into a syntax of %NN where N stands for a unique numeric format. For example, an empty space converts to %20 when encoded. Nobody wants to do this by hand so developers have made encoding tools for convenience. This is all […]

Read More »
Page 1 of 3123