Sarah Designs the World!

(And blogs about it, too.)

Month: August 2013

Get Cool Stuff

Get Cool Stuff is a non-profit up-cycle boutique. They provide training for women in underserved populations, giving them the skills to revitalize forsaken items and then sell the cool stuff they produce. Good for people. Good for the earth. What’s not to love?

Eventually their site will be more of an e-commerce platform, but for now it’s a cool web presence they can use as they gather funding and establish their storefront.

Since there isn’t too much content at this stage, I went with a one-page design, kept hip and interactive with some parallax scroll effects and CSS3 animations, none of which you can see in the screen shot below.

one page website

 

The parallax images actually look more like this:

 

parallax scroll

 

and this:

 

parallax scroll

 

Not quite sure why my Paparazzi Ap turned them into scary red and beige blobs.

In parallax scrolling, the background (in this case, the image) and the foreground (the text) scroll at different speeds, which creates a nice feeling in your tummy. Try it.

(Someday I’ll stop being so lazy and mock-up my screen shots in an empty browser window with Photoshop, the way a proper blogger/designer would, but that day is not today. So please shame me for my nerdy browser tabs and really lame bookmark folders and Inbox with 3,931 messages if you feel so inclined.)

Here’s a closer look at the content sections:

 

About Us page

 

hover content

 

On mobile, since there’s no hover, the “We Believe” circles aren’t so interactive:

We Believe on iPhone

 

That’s right folks. This site is responsive. Shouldn’t it go without saying? Can we please make responsiveness (responsivity?) mandatory?? (Full disclosure my own site isn’t responsive, but it’s a grandpa at three years old, so, give it some slack, will ya? He’s just trying to keep the weeds out of the garden and keep track of his teeth.)

 

responsive design presentation

 

Unfortunately the actual site isn’t responding as shown above because Go Daddy has some auto-redirect mobile bananas set up. But as soon as I get the client’s credentials to update the DNS, it’ll work like the beta site, captured above, and currently living on my non-Go Daddy and not-bananafied server.

Alright. Go getcher cool stuff.

Spiritual Tours of India

I dare say, this was the perfect project to come home to after spending six months in India: A tourism website for Westerners wanting the authentic ashram/yoga/meditation/ayurveda/guru experience in India. Consider me your Subject Matter Expert.

Spiritual Tours of India

So here’s the site, and…..it responds!

Responsive website

 

How much do I love responsive fly-down navigation for smart phones and tablets? Immensely!

In India, more is more is more. And then add a little more. So this design was a bit of a free-for-all. Though if it were really an accurate representation of the country in look/feel it would also be bedazzled in sequins, set on fire, wail Carnatic music, and have a cow saunter through. Maybe in CSS4, folks, maybe.

But for now, lots of decoration and ornamentation and color, but keeping the layout clean and easy for our Western viewers.

drop cap and embelishment

 

Drop caps, funky borders, bold-italic colored links.

 

colorful icons

 

Fancy pants icons.

 

sidebar illustrations

 

A couple more interior pages:

Ayurvedic Treatments Page

 

Ashram Life

 

Spiritual Tours of India South India Tour

 

More pretty shots of the full-width responsive slideshow:

responsive slideshow

 

responsive slideshow

 

responsive slideshow

 

responsive slideshow

 

responsive slideshow

 

Visit the site. More importantly: go to India!

Google Hangout

Early this year I got the awesome opportunity to play Art Director & Lead Designer on this pretty huge event that partnered the Art of Living Foundation and Google India.

Why was it awesome? So many reasons!

First, the chance to work with Google, whose cheerful, minimalistic aesthetic and tireless innovation makes my heart happy. And I mean, c’mon, it’s Google — the company that became a verb!

Second, when your professional passion intersects with your personal passion (in my case, design and meditation/service/peacemaking), life is moving along nicely.

Third, this is a cause TO BELIEVE IN! The Hangout sought to answer the question: “What can we do for a stress-free, violence-free society?” During the opening remarks Sri Sri shared these words, putting it perfectly:

When the Wright Brothers thought about flying, everybody thought they were crazy. I have this crazy idea to see a world without violence, without stress. I’m so happy that so many of you have joined me in this dream. It may appear to be far-fetched but we need to dream first. Then, one day, either in this generation or the next, it will come true.

So. The design.

First, some visually stimulating teasers playing with the idea of what a stress-free violence-free society might look like:

violence-free stress-free society campaign

 

violence-free stress-free society campaign

 

violence-free stress-free society campaign

Pollution? Bah! Our factory’s emissions include bubbles and sparkles and rainbows.

 

The next step was to position Sri Sri as the expert he is in both large-scale conflict resolution and the individual journey to peace and joy. Luckily he makes this a snap through his own inspiring words:

Sri Sri Ravi Shankar commitment

 

Sri Sri Ravi Shankar growth

 

Sri Sri Ravi Shankar non-violence

 

Sri Sri Ravi Shankar duty

 

Sri Sri Ravi Shankar reverse

 

Sri Sri Ravi Shankar women

 

Sri Sri Ravi Shankar saints

 

Sri Sri Ravi Shankar capacity

 

And some hand-lettering for the fun of it:

Sri Sri Ravi Shankar hero

 

Sri Sri Ravi Shankar take action

 

And of course, ads of every shape and size:

violence-free stress-free ads

 

Sri Sri Ravi Shankar violence-free stress-free campaign

 

And the results!

violence-free stress-free campaign

 

violence-free stress-free campaign

 

violence-free stress-free campaign

So lucky to get to be a part of it.