400 Bad request

Edit: Steve talks about once taking a calligraphy class, which he also talked about in his Stanford Commencement Address:

“I decided to take a calligraphy class to learn how to [learn calligraphy]. I learned about serif and sans-serif typefaces, about varying the space between different letter combinations, about what makes great typography great. It was beautiful. Historical. Artistically subtle in a way that science can’t capture. And I found it fascinating.

None of this had any hope of any practical application in my life. But 10 years later, when we were designing the first Macintosh computer, it all came back to me. And we designed it all into the Mac. It was the first computer with beautiful typography.

If I had never dropped in on that single course in college, the Mac would never have multiple typefaces or proportionally spaced fonts. And since Windows just copied the Mac, it’s likely that no personal computer would have them.”

Keep learning and experiencing new things. You never know how or when it may make an impact in the future.

iPhone GUI PSD

First lets get you started with the iPhone GUI PSD file from Teehan + Lax. This contains the iPhone and all the iPhone elements you need when creating your iPhone interface. Very handy, in PSD format for Photoshop.

Showcase of websites with iPhones

Now for some inspiration.

Tea Round App

First & 20

Classics

June Cloud

Zumobi

Graphik

dBelement

Firetask

Tweetie

Bottle Rocket Apps

Snow Reports

WordPress

Paraply

Voxtopia

Mock Draft

Cellar

Satisfaction Remote

Bird Feed

Tapbots

Pokeseo

Has anyone developed an iPhone app or have you designed a website for an app?

Creative packaging shows a good reflection on the brand it represents. My first real appreciation of packaging was opening my first Apple product, which was an iPod Touch. The perfectly crafted box and minimalism is reflected throughout the Apple brand, including their website. Some even go as far as to film themselves unboxing Apple products as it is such an enjoyable experience.

Drawing inspiration from packaging design can inspire new ideas and different approaches for your next project. Check out these great examples.

Route 29

Boxed Water

ITO EN Loose Leaf Tea

Skin

Coca Cola

Clover Farmstead Butter

Good Little Sausages

Tasty Bone

Incase

Monopoly

100% Chocoloate Cafe

Pot Of

Doo

Coop Norden

Other sources of packaging inspiration

• Beautiful and expressive packaging design
• Packaging design inspiration
• Creative coffee packaging
• 100 minimal and typographic package designs
• Lovely package

Further reading

• An introduction into packaging design

Is there any packaging in particular that you find inspiring?

These are all words that I would also associate with the following websites. With the right colour scheme, using elements of nature e.g. grass and trees, adding some subtle paper backgrounds and using hand drawn graphics/text you can design a fresh ‘green’ website too.

1. Jiri Tvrdek

2. Organic Supermarket

3. Sprout Box

4. Recycle Now

5. Ecoki

6. Green Globe Ideas

7. Green Web Awards

8. Edenbee

9. Silverback

10. Carbonica

11. Red Brick Health

12. Mint

13. Osvaldas Valutis

14. Opera Mage

15. Glocal Ventures

16. enviRenew

17. Plant With Purpose

18. Bikevasion

19. 53 Mondays

20. Envira Media

Further reading

• Create a spectacular grass text effect in Photoshop
• Create a sketch using the scribble effect in Illustrator

I’ve put together a showcase of my favourite illustrated characters along with some further links for inspiration.

Silverback App

Mail Chimp

Fatburgr

Cyclops

Old Loft

Branded 07

The Alamo Basement

Freelance Switch

Veerle

Ellis Lab

Project Vino

Ryan O’Rourke

Schneeballschl8

Candy Cult

Spinen

What’s your favourite?

Further reading

• 45 Excellent examples of using character illustrations in web design
• 20 Sites with beautiful character illustrations
• 30 Creative examples of illustrations in web design

With the recent publication of the A List Apart Survey 2008, I thought it was a good opportunity to follow this up with another 25 great designers.

This year’s survey found that 16.2% of those surveyed (29,567 of A List Apart readers) were female. That’s a rise of 0.1%. So there’s not much improvement in regards to the amount of females in the industry, but I have came across 25 more great designs.

1. Irene Demetri

2. Joanna Klima

@thedarlingtree

3. Ilona Filipenkova

4. Lisa Moseley

@solairis

5. Suzy Johnston

@suzyjohnston

6. Shannon Farrell

@dolceshan

7. Jenna Smith

@JJenZz

8. Jina Bolton

@sushimonster

9. Selene M. Bowlby

@idesignstudios

10. Denise Wilton

11. Adelle Charles

@adellecharles

12. Kris Colvin

@KrisColvin

13. Kimberly Coles

@imwithsully

14. Stephanie Sullivan

@stefsull

15. Winnie Lim

16. Jen Gordon

17. Joanna

18. Wiehanne

19. Madeline D’Amato

20. Renee Rist

RibbonsofRed

21. Anna Pawełczyk

22. Allison Mills

@allimills

23. Manuela Hoffman

24. Mindy Wagner

@graphicsgirl

25. Drew Europeo

Further Reading

• 25 hot female web designers part 1

Who’s your favourite? Who else would you add to the list?

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

Bright Kite

From The Couch

DesignM.ag

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

Check out this inspirational list of typographic based designs that I’ve put together.

1. Pallian Creative

2. Legistyles

3. Ben Lind

4. Made by Cool

5. Lorem Ipsum

6. Typechart

7. Elysium Burns

8. Crowley Webb

9. Alpha Multimedia

10. Astheria

11. The Typographic Desk Reference

12. Giant Creative

13. I Love Typography

14. FL2

15. Futon Media

Further reading

• 15 inspiring typography based blog designs
• 20 websites with beautiful typography

Any good ones I missed?

The post takes a look at 10 things that make up a good personal portfolio site and showcases 40+ excellent and top class portfolios.

Read the full post here.

Let me know what you think and if there’s anything else you’d like covered.

Check out this list of 20 websites using these effects plus a few helpful tutorials.

1. 45royale

2. Skylar Anderson

3. Dale Anthony

4. Elite by Design

5. Fernando Sergio

6. Dorian Castro

7. 365 Days of Astronomy

8. Studio 7 Designs

9. Exceptional

10. Abduzeedo

11. Oakes Design

12. Brian Wilkins

13. Kitfolio

14. Rawkes

15. Evan Eckard

16. You Love Us

17. RJ Designz

18. Revyver Labs

19. Mail Chimp

20. Tennessee Winter

Tutorials

• Make an Aurora Borealis Design in Illustrator
• Awesome up your design with A.B.
• Really cool Eclipse Effect in Photoshop
• Making a realistic star field

Further Reading

• 25 websites with lighting effects