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 […]
Articles by ‘Jake Rocheleau’
Crafting a recognizable logo is not an easy task. It requires a knack for visualization and a clear portrayal of ideas in text or graphics. By studying logo design work you can pick up new ideas and learn to inject them into future creative work. This gallery is dedicated to bank logos for creative design […]
Design styles can be created with free resources like icons, vectors, custom illustrations, and notably brushes. Free brush packs are available all over the web dating back to Photoshop 7. There are now thousands of brush packs online made specifically for digital designers. This collection of free Photoshop watercolor brushes can be perfect for anyone […]
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 […]
A big challenge when coding a contact form is choosing a reliable backend language. However thanks to MailThis.to this is no longer a problem. The MailThis API is free to use and takes an HTML form to send messages directly to an e-mail address. The API is surprisingly simple and you only need basic HTML/CSS […]
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 […]
User interfaces are made first-and-foremost to fulfill a user experience. This can be achieved with very basic elements, but is often dressed up with colors and textures. The use of design colors for digital UI work is tough to understand without practice. But in this post I’d like to look into how color can be […]
Hundreds of design resources can be found online to improve any web or mobile UI project. You can find everything from vector graphics to tileable textures and even quality resources for abstract background design. Custom abstract backgrounds give a more creative feeling to a website while still placing content front-and-center. Learning how to make abstract […]
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 […]
Web design requires a complex marriage of creativity and user experience concepts. Together these skillsets can make fashionable and usable interfaces for websites and mobile apps. Photoshop brushes are a popular resource for designers who want to add detailed graphics into their layouts. But with so many great brushes available online it’s tough to know […]
The proliferation of online news sites doesn’t appear to be slowing anytime soon. The quality of online magazine design trends have grown to cover featured post widgets, large thumbnail images, and credible mainstream sources built entirely on the web. In this post I’d like to explore a handful of the best magazine website layouts and […]
Color theory is a vast subject that mostly requires application to understand. But color selection is also relative to the medium, where a digital designer looks at colors differently than an illustrator or a painter. In this post I’d like to talk about web colors and how color selection applies to web design. Most designers […]
Many designers freely release their own paper texture resources to the design community. This allows anyone to craft interfaces with texture without having to scan or build your own patterns from scratch. But just because you have the resources doesn’t mean execution always works as planned. So to help with creative ideas I’ve put together […]
Every great website features a number of common pages with similar usability techniques. One of the most common yet unrecognized pages that every site should have is the 404 error page. This guides visitors away from missing pages or broken links so they can continue browsing the site. It doesn’t take much effort to craft […]
There’s value to be found in static websites such as portfolios or landing pages. But interactive websites have become the norm as more people grow accustomed to digital interactions on the web. When you consider all the moving parts of a social network or web forum you realize there’s a lot that goes into a […]
Holidays are the best times to surprise a friend or loved one with a gift. Designers often enjoy creative tools and little trinkets that can enhance their workflow. So if you wanted to buy something creative for a designer (or yourself), how would you know what to get? Take a look at the following collection […]
Adobe Photoshop is still the premiere editing suite for most graphic designers. It’s been around for over 20 years and has a massive library of Photoshop plugins for all types of creative work.
But of all the graphic design disciplines it seems UI design is one of the fastest-growing markets. This is why I’ve collected the most significant Photoshop plugins as they pertain to interface designers for web & mobile apps. You’ll find 20 recommendations of both free and premium plugins to dramatically improve your typical Photoshop UI design workflow.
Also if you’re a Sketch user then take a look at our list of Sketch plugins made specifically for UI designers…
It may seem like the design world is all digital but there’s still a tremendous demand for print work. Graphic designers commonly jump around to various print jobs or even shift into digital interface design. But it’s slightly less common to see an interface designer move into print design – however this doesn’t mean print work is any less desirable or less valuable.
In fact, you can earn a good living by juggling print work at an agency or running your own freelance studio. But if you’re a general web/graphic designer who hasn’t really looked into print design, this can be a confusing area to learn.
I’d like to share a collection of helpful resources, tools and print design tutorials for designers who want to make the leap into print design. You may not brand yourself solely as a “print designer” but these skills will give you more leverage to adorn your resume & portfolio with a few print work samples…
Every digital typeface from free to a $1,000 font pack goes through a similar design process. It’s rigorous for a beginner and does require an understanding of foundational typographic principles. But for what it’s worth, learning how to create a font from scratch is one of the most fulfilling creative endeavors in digital design.
Professional font design takes years to master, but this shouldn’t dissuade you from learning the process. Once you understand the steps needed to create a new font you may be surprised how easily they can be replicated.
This guide is meant for hobbyists and typographers who want to get into the world of font design. Bear in mind I won’t be covering specific techniques in font creation software, but rather the steps necessary to go from initial idea to completed font. At some point you will need a font creation program and I’ll cover the most popular choices to guide you along the way…
Animation on the web has transformed radically over the past 5 years. SVG animation is one of the newest techniques to manipulate graphics on a webpage. Although SVG has been supported for a long time, it only recently gained support in a majority of web browsers.
With greater support comes a greater audience and more safety for developers to test out cool ideas. Over time these ideas turn into common trends as they’re adopted by hundreds of designers. I’ve picked out a few examples that best demonstrate these SVG animation effects and how they can be applied to website layouts…
Many designers would attest contempt their rather crude handwriting. Unfortunately it’s one of those things you really need to practice & develop – otherwise it’s chicken scratches all the way to the grave. Calligraphers are people who not only love handwriting, but love it so much they turn it into a career.
Hand-drawn calligraphy is incredibly beautiful and ripe for digital reproduction. I’ve scoured the net in search of the most dazzling calligraphy and cursive fonts to use in graphic & web design projects. This collection features 30 of the most outstanding free and premium font families.
Each calligraphic style is unique with varying intricacies including ligatures, x-heights, and typographic variants. The vast majority of these fonts also come as a webfont to be used in website layouts. If you need a trendy calligraphic font to spruce up your design work these suggestions will get you on the right track…
Online animation has become much more than a parlor trick for developers to show off their skills. Animation is used to create more sultry interfaces that feel smoother and easier to use. Natural animation gives off a certain vibe of corporeality to interface design. One area that’s seen a lot of attention is the scroll-to-animate technique. […]
All elements of design – from typography to iconography – relate to the overall composition. Each full webpage offers an intimate feeling to visitors before they even notice smaller details. In this way, compositional design techniques are some of the most important things to learn regarding web design. To internalize composition, you’ll need to practice. A […]
Digital interface design follows many of the same rules as print design. Composition refers to the overall layout and white space plays a big role. Many things help to define a composition, but white space is one of the most important concepts to understand.
Learning to use white space is more about hands-on practice and experience. But you can absorb plenty of great ideas by studying how other websites are put together. I’ve organized some tips and general ideas to clarify the overall picture of white space and how it defines composition for website layouts…
Online forms are some of the most common interfaces for user interaction. Many web fields rely on user input from the keyboard, but others have pre-filled answers waiting to be selected. These may include checkboxes, file inputs, or even select dropdowns.
Although select menus are fantastic they can also be a little boring. All web design should be functional, but great web design incorporates pleasant aesthetics too.
The following ideas center around dropdown select menus for website layouts. Web designers often like to design their own custom fields which best-suit the project at hand. Select menus and similar inputs can be tricky to customize, but modern techniques make the process a whole lot easier. Check out these plugins and code snippets which can be perfect for customizing any form field…
Web design is often lumped together with a lot of other ideas like UX design and web development. Although these areas do overlap, the skill sets are not interchangeable and not all designers know how to code (or vice-versa).
But those who do code websites are often very task-oriented with a focus on the final outcome. This means it’s a good idea to work with best practices to speed up the whole development cycle. It’s not an easy task, but there are plenty of free resources out there to help.
This article includes some handy tips and resources for a more expeditious development process. As with most projects, why should work take longer than it needs to? Those who reinvent the wheel often have a good reason for doing so–but it’s not the best choice 100% of the time. Instead utilize these resources to improve the speed and efficiency of your own frontend workflow…
If you’ve kept up with design news the past 5-6 years then you should know about A/B testing. This is where two or more page designs are created and offered to a split percentage of visitors. Various metrics are tracked and designers can select a design style based on which features perform the best. It’s a wonderful technique for designers but does require some practice to fully understand.
These tips are geared towards designers who want to learn more about A/B testing as it relates to web design. Every designer is constantly trying to better himself or herself, but self-betterment takes work. You need to be confident with your existing skills and push forward to learn more about user experience design. A/B testing is just one of these skillsets which can improve your value as a web designer…
Crafting a brand new layout from scratch requires a lot of smaller pieces along the way. Internal pages don’t all look the same and these pages require some extra work to organize great designs. While the homepage is often seen as the most important mockup, internal page mockups prove quite useful when it comes time to start development.
The following examples and ideas should be invaluable to any designers working on a new contact page design. This may be for your own portfolio or even a large corporate website. I want to focus on specific trends and design techniques which can be used to create a stunning contact page with all the useful tidbits and knick-knacks…
Modern websites are expected to be much more interactive than previous decades. Website design isn’t just about content anymore. It’s about clean user interactivity for reading and browsing through content. Web designers have to consider the behavior of visitors and how design can affect that behavior.
This post catalogs a few clarification methods which can be employed during the interface design process. It’s wise to formulate a plan before even starting a design mockup. This way you’ll have a finely-tuned direction for the website and its interactive elements. Once you understand more about design clarification you’ll have an easier time focusing on the bigger picture of user experience…
Web designers have taken on many more roles in just the past few years. It’s now quite common to find designers who also specialize in frontend development, UX design, and even some backend development. One of the newest trends of responsive design is crafting a single base of HTML/CSS code which can fit properly into any browser window.
There is an intricate balance between desktop and mobile web browsers. Now more than ever it’s crucial that web designers find a balance for all users in every major website. Responsive web design is more than just supporting mobile devices – It’s truly about creating flexible layouts with page elements that can shift and rearrange themselves according to the current viewport.
In this post I’ll explore some responsive web design ideas to help get your creative juices flowing and hopefully leave you feeling ready to make some changes to your sites if needed…
Designers have a need for relevant fonts in all creative mediums. Both print and digital design follow a similar track when choosing and composing typography. But there’s always the nuance of actually choosing which font to use. While on the search for a terrific typeface it’s all-too-common to bump into a great font that’s also hard to identify.
Thankfully in our modern high-tech era there are plenty of font identifier tools which can help. All of these tools can be accessed using a web browser and they’re a lot more accurate than you might assume.
The following resources are meant for designers and developers who often need to identify a particular font. Up until recently this was an arduous task which required hours of research and letter matching. But nowadays you can find the exact font family(or at least related choices) in just a matter of minutes…
Bohemian Coding is a software company most notably recognized for creating the OS X application Sketch. It allows designers to work with both vector and raster images in the same document. As you might imagine, this program has caught widespread attention from web & graphic designers all over the world. And if you design on a Mac then it’s worth testing out Sketch just to see what all the fuss is about.
For this post I’ve collected 25 free & useful Sketch plugins meant for all types of design. Whether you create icons, interfaces, or anything else, these plugins will surely improve your workflow.
Mastering Sketch takes time and lots of practice. Since the program is still new there isn’t as much information online compared to other programs like Photoshop. But sticking with a routine of continual practice will yield amazing results – and these plugins can prove to be quite beneficial along the way…
Whether sculpting a new identity or working with an existing one, brand guidelines can be exceedingly important to the whole creative process. A branding guide (also known as a style guide or brand book) offers a set of rules about a company’s brand to anyone who may need them. To whom might these rules be directed?
Basically anyone who may need a company’s branding added into their own work. Authors, editors, copywriters, marketers, web designers and/or graphics designers are just a few examples. The purpose of a branding guide is to offer a step-by-step process for duplicating the company’s identity.
Although it may seem like a rudimentary process, brand guidelines need to be super clear and relatively specific. Each company will make up their own rules based on how their identity should be used out in the wild. Since this type of project can easily lapse into a state of disarray I’ve put together this handy guide for designers. You’ll find a metric ton of great examples along with practical tips which can be applied into your own branding guide…
One such area of broadened potential would be jQuery-based calendars for websites. Although date & calendar interfaces have sparse usage, they come in handy for very specific circumstances. And when building a site that requires this type of interface you’ll be happy to know there are dozens of open source plugins available.
I’ve catalogued the 30 best free jQuery plugins that offer datetime functionality. Some are more developed than others and each plugin has its own set of benefits. The best part about using open source code is that it’s easy to customize for your own purpose. So peruse through this collection and take a look at any plugins which pique your curiosity…
Popular WordPress Themes
- WordPress Business Themes
- Responsive WordPress Portfolio Themes
- WordPress Photography Themes
- WordPress eCommerce Themes
- WordPress Magazine Themes
- WordPress Real Estate Themes
- WordPress Band Themes
- WordPress Wedding Themes
- WordPress Hotel Themes
- WordPress Theme Builders
- Comparison of WordPress Theme Clubs
More Design Inspiration
- Ecommerce Websites
- Photography Websites
- Design Portfolio Websites
- One-Page Portfolios
- Design Agency Websites
- Church Websites
- Non-Profit Websites
- Educational Websites
- College and University Websites
- Corporate Websites
- Real Estate Websites
- Travel Websites
- Minimalist Websites
- Colorful Websites
- Websites with Unique Layouts
- Magazine Style Designs
- Creative Website Headers
- Websites with Creative Navigation
- Textured Websites