Sensorial’Org

I’m an amateur artist, and I dabble in web design and random crafts. But the other thing I’m really psyched about is interior design. Shamelessly, I watch Cityline, House and Homes, Designer Guys, Divine Design, and even Debby Travis’ Facelifts. There’s also this other program–whose name I can’t remember–where the hobbyist will challenge that professional, also the host, in a design challenge to design the same room.

The tours and projects on these shows, however, are more conservative (not in the traditional vs. contemporary sense). The designs that I’m really in love with are… not.

Read more…

To complete, you have my workspace:

Ideally, I’d have two encyclopedias between the glass top and the computer drawers to add some character, but the glass won”t hold. And if I were rich, I’d totally splurge on this piece of wall graphic.

But on the upside, I have Hugh Laurie beside my keyboard =D

Although it has its share of limitations–it doesn’t have brushes, it can’t crop, it can’t manipulate perspectives, it doesn’t have masks, it’s primitive when it comes to transparency… But once I get over the fact that it’s not an editing program, I’m convinced that OmniGraffle can do everything I’ll ever need in a wireframe.

Tips and Tricks

Stencils

The stencils library is probably the first thing a beginner should get acquainted with. Analogous to Photoshop’s brush palette (but don’t expect to be able to create ’strokes’), stencils are a collection of predefined objects that you can drag and drop onto your canvas again and again. I never have to create another ‘X’-box placeholder again.

The program comes with a set of default shapes, but you can download a wide variety of them from Graffletopia, or created on your own (Stencils > New Stencil ) set of objects.

Shapes

Out-of-the-box it has stars, dialog boxes, clouds, arrows… (not at all unlike Photoshop’s custom shapes), and what it doesn’t have, you can probably find in a stencil. But that’s not all, and I just discovered this recently, you can combine shapes via intersection, union and subtraction: Edit > Shapes. Of course, you can always create real custom shapes by using paths and making the points editable in the Edit menu.

Read the rest of this entry »

According to W3School 36% of Internet users still have 1024 x 768 resolutions as of early 2009. From the Streamed Hardware Survey, 19% are using 1024 x 768, 23% with 1280 x 1024, 12% with 1440 x 900, and 18% with 1680 x 1050.

With that in mind, there’s five additional things that you have to be aware of:

Constraint: The background image is fixed.
Design implication: The background will not move with the scrolling. If you have text running across the top then there is a chance (depending on the user’s resolution) that the content area (the area holding the tweets and the sidebar) will overlap* that information.

Constraint: The background image is fixed to the top left while the content area (763px) is centered.
Design implication: As screen resolutions increase, the content area will be shifted to the right relative to the background image. On a resolution of 1024, the content area will begin at [(1024-17-763) = 244]/2 = 122 pixels from the left. On a resolution of 1250, it begins at the 250th pixel, and on 1440 at 330, etc.

Constraint: The background image can only be tiled both vertically and horizontally, or not at all.
Design implication: The background should be designed such that it tiles seamlessly or disappears gracefully against a solid background colour. Otherwise, you’ll end up with a half-baked mosiac on larger resolutions. But this also means that you can have your background image take the dimensions of the maximum possible resolution provided that…

Constraint: The background image cannot exceed 800 kb.
Design implication: Optimize graphics for the web. Half of second delay in responsiveness can kill user satisfaction.

Constraint: The background of the header/footer navigation and the tweets will always be white.
Design implication: Before you even begin your comps, you have to start thinking about colour schemes. Eventually, you’ll have to pick a font colour that’s dark enough against white and provides enough contrast with the background of your sidebar.

* Overlapping isn’t really the main concern. If the background is not fixed, it will disappear when the user scrolls anyway; however, if the content area cuts across the design then it’s a disruption. Really, I’m just concerned about the aesthetics.

So designing for Twitter, a walk through

I want something graphical on the left to balance out the right sidebar. However, I won’t go for an additional sidebar because unless someone has the exact same resolution as me, the content area will slice across it or be so far away from it that it’ll look awkward. I’m going to go for a collage effect where I intend for the content area to overlap it.

I am going to design for the two most popular resolutions: 1024 and 1280. That means the center of the graphic will begin at the (122 + 250)/2 = 186th pixel. Or graphically speaking, where the black vertical line is:

Working with that landscape, I used guides (the blue lines) to mark off starting point of all the important elements. I also used placeholders for the content areas. Any graphical elements that I place on top of those placeholders are elements that will be hidden when the background is uploaded.

Now that I’ve laid out my primary resolutions, I still want to accommodate those with 22+ inch monitors. If I don’t consider them, my background would either end abruptly or tile unintentionally. So I extend my canvas to 1680 x 1050 pixels by adding space to the right. I will accept tiling for anyone who has a higher resolution than this.

New placeholders are created and positioned as they would appear on 1440 and 1680 resolutions. This helps me visualize where my design is with respect to the new dimensions:

Finally, with everything laid out: 1024 x 768 (top left), 1280 x 1024 (top right), 1400 x 900 (bottom left), 1680 x 1050 (bottom right).

Now see it action! And to help you design your own profile page, I have all the measurements worked out in a convenient PSD template.