Explore the Articles

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.

Read More
Design

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.

Read More
Design

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.

Read More
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.

Read More
Design

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.

Read More
Design

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?


Read More
Design

Looking Beyond Common Media Query Breakpoints

With all the talk about responsive Web design, designers and coders are moving even further from the fixed pixel layouts of design’s print-based history. We’re finally thinking in terms of fluid layouts and expandable, interactive content. But when you get down to it, we’re still thinking of the fluidity in terms of desktop, tablet and mobile sizes.

Read More
Design

Overview of Breakpoints in Responsive Web Design

Last time, Jamal went over media queries. This is an important aspect to know of Responsive Web Design (RWD from now on) because it is this CSS declaration that allows for the different layouts to appear at different screen sizes. Hmm, now what about different screen sizes? To make it easy to understand, lets look at this using an analogy. So, imagine that RWD is a blueprint for a wonderfully new house. The foundation, which the rest of the house depends on, would be media queries. After the foundation comes the first level of the house, which sets the tone for how the rest of the house will be built. In this house, the first floor would be break points.

Read More
Design

Convert Web Page into a Responsive Website

Michael John Burns has shown us how to convert a PSD file to working HTML/CSS. Now, in this tutorial he will teach you how to make it Responsive by using Media Queries. Media Queries will change the look of the website depending on the screen resolution of the device: desktop to a mobile resolution by tweaking the CSS for a variety of viewports. By the end of this media queries tutorial you will learn how to convert any website into a responsive website.

Read More
Design

Code a Photoshop File to a Working Website

In this PSD to HTML tutorial you will learn how to code a page In Adobe Photoshop. Michael John Burns is not really into coding, more of a design person and this is his first coding tutorial. He will try his best to guide you through the whole thing. He will be coding this from scratch and by the end you will have an awesome and fully functional page layout.

Read More
Newer articles Older articles