Web design is essentially the organization of information into a readable, usable, functional and accessible format. Good organization of content is crucial, and you need a strong layout that you can build a website upon. You can use numerous interface elements and structures to organize content, such as jQuery-based content sliders and modal windows, which are basically windows that float above the page.
The modal window has many advantages. For example, when a modal window contains a smaller element, the user doesn't need to load an entirely new page just to access it (another way to achieve the same effect is e.g. by using AJAX-based tabs). By providing modal windows, you improve the usability of your website. Having to load pages over and over will annoy most users, so avoiding that is definitely a good thing. Modal windows also allow you to save space by getting rid of large elements that don't need to be on the main page. For example, rather than putting a full video on a page, you can just provide a link, thumbnail or button of some sort.
In this article, we'll go over best practices and trends for working with and building modal windows. We'll also provide numerous examples of well-constructed modal windows and a few scripts to get you started with building them.
Read more...
Want to save some time? Of course you do! You are probably always looking for ways to do this faster and make that easier, it's human nature! One of the best ways to save time is experience. The more experience you have, the more comfortable you are working, the more you have developed your own best methods, and with experience you know how to better avoid mistakes and disasters. So always stay hard at what you do and you will definitely save more than "just" time!
However, regardless of your experience level, there are ways to speed up the common design tasks. You should find some of these not-so-well-known tips and strategies listed below very helpful for your workflow. And please feel free to suggest more ideas in the comments to this post!
Read more...
Although static graphics is obviously much easier to scan and therefore can be easily perceived, motion graphics brings dynamics and life into otherwise static content. Animation can help designers to convey a deeper meaning with the use of various video-techniques. It can also provide a better data visualization than the static graphics. How and where you use it in real-life situations is totally up to your talent and your abilities to express yourself.
Motion graphics are not only created using digital techniques; also traditional animation and special effects techniques are used. However, digital techniques help to minimize production costs and achieve nice results with less effort. For example, the Juno opening sequence was a hand-made motion graphics which took painstakingly long time to finish.
A couple of weeks ago we presented Best Tutorials For Cinematic Visual Effects. In this post we present a collection of useful Tutorials for motion graphics – created with the use of digital techniques. These tutorials focus on the designing skills of a motion designer and not on the modeling or the animation. You can use these techniques to create stunning motion graphics or improve upon these ideas and come up with your own creative ideas that will be truly remarkable. Most of the tutorials are from similar sources, because of its quality and usefulness.
Read more...
From low-budgets to rush jobs to piss-poor project management, every designer has one time or another faced the inevitable, "I need a logo (brochure, website, etc.) done ASAP" scenario. Depending on the designers' work situation, some can simply choose to decline these projects. But for many full-time designers, this “rushing creative” is a very real and necessary part of their job requirement.
So when asked to “just slap a design together” or “crank it out,” how do we as designers maintain our standards and integrity when a logo must be created in three hours? Or a website in a day? And for that matter, can we? In this article, Stephanie Orma, a graphic design herself, hangs her head out the drive-through window and shares her personal experience, tips, and advice on how to handle the “hurry-up and be creative” demands of the graphic design industry.
Read more...
Floral typography is the technique that combines typography, calligraphy and lettering to create dynamic, "flourishing" designs. With the help of floral elements you can create very tempting and vivid artworks in which the typography seems to be shaped by plants and flowers. In this way you can convey your message in a very artistic way. In fact, various floral ornaments – which are the essential component of floral typography – can make the design stand out and help the artist to create inspiring, refreshing and thought-provoking pieces of art.
Below you'll find a beautiful collection of floral typography and also some outstanding tutorials that will help you to master the technique or at least get some understanding of how this technique can be used. Please feel free to explore the further works of the artists presented below as well.
Read more...
If you are an experienced professional, chances are you have a good set of tools and a work process that you repeat on a daily basis to handle your work. That's good; it's how you become more productive, and become an expert. But with repetitive processes come repetitive mechanical work. Whether it's opening a file in Photoshop to change the format or adding an iCal to-do item based on an email you received, these little tasks can be streamlined. That's the purpose of AppleScripts.
AppleScript is a scripting language developed by Apple to help people automate their work processes on the Mac operating system. It accomplishes this by exposing every element of the system's applications as an object in an extremely simple, English-like language. AppleScript is to the Mac OS as JavaScript is to browsers.
Quite a few AppleScripts are available on the Web, ready for you to use, so you don't even need to look at their code. This article presents you with 17 of the most useful ones.
Read more...
As web-designers, we shouldn't underestimate the power of typography. The content is the king and typography is an extremely powerful mean that can help designers to effectively convey their messages to the audience. Recently we presented an overview of useful typographic CSS-tools and 8 Simple Ways To Improve Web Typography. And now it's your turn to show what you are capable of when using these tools.
In this post we announce the Typographic Layout Design Contest, a contest that has the goal to collect beautiful typographic (X)HTML+CSS-based layouts created by you and release them for free as a gift for the web design community. And, of course, we have some nice awards for best designs submitted in the contest.
Read more...
There are specialized terms referring to all sorts of aspects of web design. For someone just getting started in web design, or someone looking to have a site designed, all the technical jargon can be overwhelming. Especially the acronyms.
Below is a guide to industry terms that should get you well on your way to understanding what web designers are talking about. In addition, we've provided some resources for each term to give you more in-depth information.
Accessibility. Basically, this is the ability of a website to be used by people with disabilities, including visually impaired visitors using screen readers, hearing impaired visitors using no sound, color blind people, or those with other disabilities. A website with low accessibility is basically going to be impossible for those with disabilities to use. Accessibility is particularly important for sites providing information to those with disabilities (healthcare sites, government sites, etc.), though it is an important aspect to consider when designing any site.
Read more...
