So, over the last few months we’ve been working on an iPhone game, Property Mogul, which is finally finished and available in the App Store. I had a lot of fun working on the graphics and above are some of the icons I created for the game (used when News events hit certain property areas). More details on the game as soon as I have a little more time to spare.
Design is not about awards”
At the end of every project I like to ask myself some questions to make sure I did what I was meant to do – in fact what I was hired to do – as a designer:
1. Did I solve the problem in the best possible way? / Does the final site meet its goals?
This is always the first question I ask, and actually the question that has been with me throughout the project. Whether the “problem” is a requirement for a new site to promote a book, or a redesign of a site to allow it to be more usable and aesthetically pleasing, the “problem” is at the forefront of my thinking. Is the outcome the best possible solution given the requirements and any limitations to the project itself?
2. Is the final product completed in the best possible way?
Did I dot all my “i”’s and cross all my “t”’s? This is where I like to check that I took the time to worry about the final details of the project – the little things that often get overlooked.
3. Is the client happy?
They are the ones that hired me and it shouldn’t just be a matter of them being happy with the final site, but they should be happy with the entire experience.
My goal is to answer yes to all 3 of these. I consider it a successful project if I can. Never, though, do I ask, “Will this win awards?”. That’s not the point. For me anyway.
Recently we (Being Wicked that is) worked on creating the new Fashion for All web site. F4a is a national non-profit in the US. The aim is to offer women living in low-income communities a day of dignified shopping and access to community-based organizations, which provide educational, career, health, wellness, and parenting resources. It’s about providing the tools and resources for women to achieve personal and professional growth. A good cause indeed.
The branding for f4a was done by a very creative group who handed over a PSD for the homepage, along with some minor requirements/requests. The main one, and the one that had me Googling a bit: to have the background photograph expand/shrink with the browser window. I’d seen this done before, but never tried it out myself – always great to have a challenge and learn something new. I Googled and found a few techniques for this – some much better than others.
Until CSS3 is widely accepted by browsers (come on, come on! do you know the great things you can do with CSS3?), we have to look at other options. If CSS3 was an option, this is all we’d need:
body {
background: url(bgimage.jpg) no-repeat;
background-size: 100%;
}
Ahh, so neat and compact. But, alas, this is not an option yet. So, we fake it.
There are options, using only CSS, that allow us to set the background image to the full width and height of the page. The problem though is proportions. When you expand the browser horizontally only, or vertically only, the image expands but distorts because it doesn’t expand proportionally. We want to keep the image looking “normal”. After some Googling, I came across this from Kimili.com and it was the best solution I found for what was needed: Flexible Scalable Background Image. Michael gives a detailed tutorial on how to set this up with a working example to reference as well. If you have been thinking about using this technique, this is the tutorial for you.
A passing word of advice: when adding the JavaScript call, keep it in the <body>. I initially placed it in the <head> out of habit and wondered why it wasn’t working.
And we took it a step further by making the background image a custom field in WordPress so that each page can have a specific background image. If nothing is set, then it uses the default homepage image. This also allows the folks at f4a to easily update the background image for each page as they do more events.
<?php if ( $image ): ?>
<style type="text/css">
body { background-image: url(<?php echo $image; ?>);}
</style>
<?php endif; ?>
I’m absolutely in love with this new online mag: Lonny. It is a beautifully laid-out magazine with 195 pages of stunning photos, inspiring decor and more. Their mission:
OUR MISSION is to reopen the doors of accessible design. By embracing an online platform we provide inspiration at the click of a finger, directly connecting our readers to their favorite products and resources. Our freedom from page limits means that we can share more content in each issue, delivering an intimate look into the way people really live.
I thoroughly enjoyed browsing through the magazine. This is only the premiere issue so I’m really excited to see future issues and what else Lonny has to offer.
(All images are from Lonny Magazine)
just grabbed this app for the iphone – Shake It Photo . it should be fun playing with it. pelei, of course, is the first test subject.
