Preparing Websites For The Unexpected

Designing websites for smartphones is easy compared to retrofitting those already in place. More than that, it’s embarrassing how, almost eight years after CSS gained practical acceptance, a lack of foresight haunts those of you who write HTML. Converting older websites to responsive design causes headaches not because small screens are difficult, but because most HTML documents were written under an assumption about screen size.

Design a Textured App Icon with Fireworks

App icons are often the first thing you see before making a purchase. In this tutorial James Parker is going to use Fireworks to create an app icon for a fictional basketball game. Because realistic textures can really enhance icons, he’ll show you a quick and simple way to replicate a brushed metal effect, along with some simple lighting techniques that will really make your icons stand out from the herd.

Forge Your Own Evil Sword of Evilness in Illustrator

One to rule them all… Wait, that’s not the story. But, of course, every Lord of Darkness needs some dark, evil weapon that will make their enemies cry in fear just looking at it. Today Monika Zagrobelna will create an Evil Sword of Evilness in Adobe Illustrator, perfect for the vector warrior! So, let’s forge one!

How Fluid Grids Work in Responsive Web Design

Responsive design is the process of arranging the layout in a way that all the important information is presented in a user readable way in any kind of device or screen size. Most designers will choose a grid based layout since it’s easier to handle grid based layouts in different kind of devices. It’s your decision to choose between a fixed or fluid grid to design the layout. Throughout this tutorial Rakhitha Nimesh is going to focus on fluid grids and their importance in responsive design.

Stop Chasing Screen Resolutions

Resolution is a funny thing to measure; it’s not a physical size change, but a clarity change. It’s not making images, brighter, or more rich in color, but making them denser. Of course, when designers get a taste of high-resolution displays, they’re hooked. And they all want their websites (and the websites of their clients) to look awesome on the devices that are sporting these displays. Many web designers are racing towards that goal by creating images for each new resolution that comes out.

Design Cutting Edge iOS Apps With Adobe Fireworks

Since the release of iPhone 4 and the iPad 3, Apple has doubled the resolution of the displays, which are now 640 x 960 pixels (iPhone 4 and 4s), 1536 x 2048 pixels (iPad 3), and 640 x 1136 pixels (iPhone 5). To keep a good-looking user interface for both the old as well as the Retina resolution, Apple decided not to resize all graphics or make use of scalable image formats (such as SVG), but instead it now requires two sets of graphics for each device. When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in.

Using Transparency in Web Design: Dos and Don’ts

Creating a web design using transparency can be both beautiful and tricky. Transparency is the effect created when a color block, text or image is made thinner or desaturated so that the color is diluted and what is behind it shows through. The effect can be quite stunning when executed properly – creating a great place for text or as a way to bring focus to a certain part of an image. Designers must be careful though when using transparency. The effect can be tricky to do well, as readability is often a concern. Transparent boxes and text at the wrong levels can also be distracting and take away from the overall design.

Create a Vector Film Slate Icon

In this tutorial, Rype will show you how to create a vector film slate icon with the help of Adobe Illustrator. The tutorial uses some basic shapes, some gradients, and even a blend. Moreover, you can easily customize this tutorial with your own logo or typography.

Comparing Adaptive and Responsive Layouts

A responsive layout is in theory always better than an adaptive layout, but in some cases an adaptive layout is a more pragmatic solution. An adaptive layout will give you more control over the design because you only have a handful of states to consider. In a responsive layout you easily have hundreds of states — sure, most of them with very minor differences, but they are different nonetheless — which makes it harder to know exactly how your design will look.

Powerful Command Line Tools for Developers

Life as a Web developer can be hard when things start going wrong. The problem could be in any number of places. Is there a problem with the request you’re sending, is the problem with the response, is there a problem with a request in a third party library you’re using, is an external API failing?


Newer articles Older articles