Introduction to Responsive HTML Newsletters with Zurb Ink Framework
The learning process to create an efficacious newsletter is often tiring and difficult. But as you get more comfortable with newsletter design these ideas become simpler and easier. You’ll always need a solid understanding of design principles when creating e-mail notices or newsletters. But you also need to know how to code newsletters in a manner that’s best suited for most e-mail clients.
I’d like to introduce Ink by Zurb which is a responsive newsletter framework. The basic template uses standard HTML tags for creating single-column or multi-column layouts which naturally respond to screen size. It’s all fairly easy to understand once you’ve spent a bit of time playing with the code. I’ll provide a quick walkthrough of the design process and how to use the framework.
Getting Started with Graphics Design for the Web
Graphic design is such an engrossing topic because it requires an enormous amount of time and practice to learn. This is similar with web development, but coding is often seen as more logical and straightforward. Design has structured guidelines, but it is much more of an art than a science. You should learn these basic guidelines and understand why certain graphics or colors work together before starting to breaking those rules.
If you have passion and perseverance then nothing can truly stop you from becoming a great designer. The first step is to recognize how the process works and where your energy needs to be focused. I want to share my thoughts about graphic design for website layouts and offer a few bits of advice for anyone interested in the field.
Rapid Prototyping for Web Design: Basic Tips and Resources
If you’ve never heard about rapid prototyping it can be defined by the two individual terms. “Rapid” means a speedy action taking place over a short period of time, and a prototype is typically the first model of a project. This process requires fast iterations of design to implement features, test how they work, and fix what doesn’t work until you reach a comfortable solution.
This article will go over some of the basics to rapid prototyping and how you can get started. I’ll be focusing specifically on website design, but keep in mind that you can rapidly prototype any interface including mobile apps or GUIs for software. I’ve also included some related posts and popular tools for prototyping.
Tips for Building Clean Website PSD Mockups in Photoshop
If you’re a web or graphics designer then you should know about that oh-so-adorable design suite Adobe Photoshop. Folks who have been using the software for years can vouch that it’s quite difficult to master. There are so many techniques for creating UI elements, website layouts, icons, and other digital graphics. It’s crucial that you learn how to organize these assets into a complete, unified design.
In this article I’d like to cover methods of organizing PSD files in Photoshop. Whether you’re a one-man team or working in a large studio setting, it always helps to stay organized. These tips may appear like common-sense ideas but so many designers overlook this systematic and detailed approach.
Building a Mega-Navigation Menu with CSS3 and jQuery
Larger navigation menus will typically include separate dropdown lists to appear on hover. But for some websites it can be necessary to expand this dropdown across the entire page. Designers might call this a “mega navigation” for its influence over the whole menu.
In this tutorial I want to demonstrate a method of creating one unified mega navigation menu. There are many different techniques you can use to achieve a similar effect. I’ll be using jQuery to embed sub-navigation content into a dropdown mega nav box. Take a look at my live demo to see the final design.
Coding a Toggle-Based FAQ Page with CSS3 and jQuery
Company websites often have Frequently Asked Questions for people who don’t know much about the corporation or their services. Larger pages with Q&A listed together will often have a table of contents at the top. I don’t like this method because the pages end up long and sometimes confusing to navigate.
This tutorial is based around a similar idea, but using toggle effects for each question. As the user clicks on a question the answer will slide down and toggle into view. Users can also click already-opened questions which toggles them closed again. This technique is perfect for saving room on the page while cramming together an assortment of helpful information.
36 Adobe Illustrator Tutorials on Vector Design
Working in Adobe software has become the norm for most creative professionals. Photoshop is a huge program and compliments nicely with the entire Creative Suite. But Photoshop is primarily used for bitmap graphics, while Adobe Illustrator handles vector design in a similar fashion. It seems complicated but if you have the time to learn Illustrator it is well worth the effort.
Thus I’ve put together a handful of tutorials focused around vector artwork. These online guides and tutorials will help any designer understand how to structure vectors using Illustrator. There are a number of tools and techniques that can only be learned through practice and repetition. Take a peek over the list and see if anything catches your attention.
“Almost Flat” Modern Icons
How To Code a Forrst API Webapp using JSON and jQuery
Modern development APIs work like agents for sharing information to other 3rd party websites. I’ve written many past tutorials about API development to help anyone new to this process. There are so many web-based services that it’s tough picking something to grab people’s attention.
In this tutorial I want to demonstrate how we can access the Forrst API using jQuery. Some API wrappers actually require server-side code like PHP or Ruby. But it’s often easier to work with JSON objects instead. Then we can parse all the return data using client-side JavaScript. Take a look at my sample demo to see the final product.