Open/Close Navigation

Articles by ‘Jake Rocheleau’

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 »

Free Abstract Background Images, 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, […]

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 »

Best 3D 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 »

Best Websites to Find Free Stock Photography

The process of locating free stock photography has always been a grueling task. Only recently have multiple resources popped up online offering freely-available high resolution photography at the click of a button. Note that many of these resources use the CC0 license which allows you to download, edit modify, and publish without attribution. These are […]

Read More »

Best Icons and Iconsets for Web Designers

The field of web design is loaded with talented designers, many of whom release their work for free online. Icons are one of the most sought after resources because not all designers know how to create icons. A free iconset will add quality accents into any layout design. This post includes some of the best […]

Read More »

Ultimate Guide to HTTP Status Codes and Server Error Messages

Most of us are familiar with the gut-wrenching, nerve-wracking error codes like 404 and 500. But did you know that not all HTTP status codes and server error messages are mean and scary? Although some of these numbers could appear in the tech remake of Nightmare on Elm Street, others should evoke a sense of excitement and jubilation! But these “good” status codes are rarely visible to the average Internet user.

So this leads us to one final question: How do all these status codes work?

In this guide you’ll find all the necessary information to understand the concepts behind HTTP status code messages. Whether you’re a designer, developer, or just a curious Internet fanatic, this information should be useful to people of all backgrounds. It is my goal to clarify the process of website requests and how the web server passes information to your machine…

Read More »

How To Code a Vertical Accordion Nav Menu with jQuery

Website navigation is an important aspect to any functioning layout. Users will often be looking for methods to traverse over your pages, and sometimes this requires a bit of creativity. I love the idea of vertical navigations especially with sub-menu links.

In this tutorial I will demonstrate how we can build a simple vertical navigation accordion menu using CSS3 and jQuery techniques. We can build custom styles and format the links to slide down & up on each click. Using this method we can also build sub-menu links, splitting up headers by ID or class names. Follow along with the ideas below and feel free to download a copy of my source code.

How To Code a Vertical Accordion Nav Menu with jQuery

Read More »
Page 1 of 3123