Lorissa Shepstone » Design

Property Mogul – quick peek

Lorissa — Thu, 04 Mar 2010 12:06:41 +0000

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.

what’s the point?

Lorissa — Thu, 28 Jan 2010 17:18:05 +0000

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.

Full Scalable Background Images

Lorissa — Wed, 14 Oct 2009 12:01:59 +0000

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 . I initially placed it in the 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.

Lonny Magazine

Lorissa — Wed, 07 Oct 2009 19:29:29 +0000

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)

ShakeItPhoto + iPhone

Lorissa — Sat, 22 Aug 2009 18:32:57 +0000

ShakeItPhoto + iPhone, originally uploaded by lorissa.

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.

HP invent

Lorissa — Wed, 15 Jul 2009 19:40:53 +0000

HP – invent from Tom and Matt on Vimeo.

really clever! via David Airey.

styling google docs forms

Lorissa — Thu, 02 Jul 2009 13:01:05 +0000

recently a client needed to insert a google docs form on their site. they had already selected the basic template and set-up the form, but the basic template had a white background and this form needed to be embedded on a site with a dark grey background. not very aesthetically pleasing at all. you can style the forms though, by adding a few parameters to the form URL that google provides you. here are some options:

to remove the title of the form add: &ttl=0 (fyi: &ttl=1 would insert the title)

to change the font add: &f=font_name

to change the text colour add: &tc=hex_value

to change the background colour add: &bc=hex_value

to change the link colour of the “help links” at the bottom add: &c=hex_value

pretty nice and easy and allows you some control and flexibility over the form.

FOWD Videos

Lorissa — Fri, 15 May 2009 08:17:47 +0000

sadly, i couldn’t make it to the future of web design in london earlier this month (hopefully next year). if, like me, you weren’t able to make it, never fear! the good folks at carsonified have posted all the content from the event online. good stuff! it’s time for me to get another cup of coffee and start making my way through the videos.

simply beautiful.

Lorissa — Thu, 30 Apr 2009 15:27:43 +0000

Playing For Change | Song Around The World “Stand By Me” from Concord Music Group on Vimeo.

this is well worth 5 minutes of your time. trust me. read more about the video and be sure to check out playing for change. such a brilliant idea.

Its On! Redux

Lorissa — Wed, 29 Apr 2009 09:30:26 +0000

as i mentioned yesterday we weren’t entirely happy with the colour scheme of It’s On. although the aim was to be warm and inviting, we didn’t feel it really worked. so, late last night we redid a few things to make it brighter, bolder and hopefully just more appealing. a great example of evolving a design through various iterations as well. i’m already seeing minor tweaks i’d like to make down the road. too often people feel that once a design is done in photoshop, that’s it, it’s set in stone. not so. a design can really improve if you are just a little flexible and willing to evolve it as the site evolves. small changes can make a big difference. at least that is what i’ve found.

we’ve made a few other improvements as well introducing country codes and a time stamp for when the event was posted. also, now a tweet doesn’t have to start with @eventin, just as long as you follow the syntax of @eventin city: somewhere in the tweet.

so, if you know of any events in your city, spread the word.