Ask HN: When designing a personal site, how to get through creative-block? | Hacker News Reader

Ask HN: When designing a personal site, how to get through creative-block?

19 pointsnicksergeant9 comments

I'm a front-end guy. I've done design here-and-there, but I'm no "designer". Still, I want to design my personal site.

My biggest fear is the blank canvas. Staring at a completely-white Photoshop canvas yields nothing but frustration.

My question is this: as coder, programmer, whatever, how do you get past the initial creative block?

View on HN

Go out on the wild and get some inspirations:

Dan Cederholm: http://simplebits.com

Spencer Fry: http://spencerfry.com

Mike Rundle: http://flyosity.com

Sam Brown: http://sam.brown.tc

Matt Mullenweg: http://ma.tt

Tim Van Damme: http://maxvoltar.com

Meagan Fisher: http://owltastic.com

Adii Pienaar: http://adiirockstar.com

Do you already have ideas when you fire up Photoshop? If not, how about some inspiration?

http://inspirationti.me/

http://minimalexhibit.com/

http://beautifulpixels.com/

If you already have several ideas, I recommend getting something down on the canvas as soon as possible. Just start with one element, like a menu for example.

You might also try prototyping with a simple HTML page with embedded styles. This lets you concentrate on one file in your text editor and then move the styles into a stylesheet later.

I also recommend writing some copy before you start designing; that way the content will help dictate the form of the site (e.g., do you need to present a lot of text or only a little?).

The best way to design a personal site is go minimal - bare minimum.

But problem is you need a designer to handle white space well. Non-designers fear it (yes the blank canvas is white space)

So just go with one column layout. Use Georgia, seif; typeface stack. Use variations of size and italics to differentiate high-lites. Use shades of gray. Don't make it wider than 1000px.

Bonus Tip: Keep line height of text (css propery: line-height: 1.5em;) to 1.5em and text size to 14px.

If you can pull this one off. You will have a side that even designer will envy.

Inspiration: http://netspencer.com/ http://www.kingsidharth.com

Marissa Mayer (Google Head of Locations, formerly Products) touched on this problem in a talk she gave. I vaguely remember, but I believe she talked about how a painter was always overwhelmed by his blank white canvas so he would paint a small stroke on each canvas to start with that. Often times having a start point can help spur you into motion.

One way I like to get started with design is by working on the logo first (which is relatively simple, since its plain text at first), and then continue to build around it until I'm past the block. Hope that helped.

Start with content. Don't even make a stylesheet. Just get some content in there with the appropriate HTML tags. Then start a simple stylesheet that makes the content readable. Then you can start actually designing.

Starting from a blank slate is painful, but if you have content to work "around" it's much easier (for me at least). It turns out to be more like molding your design around your content than coming up with a design and then shoving your content into it.

(Note: I'm Nick's coworker, and I know he has plenty of content to start with)

Right. I had considered this, but somehow shoved myself into wireframing mode, which turns out to suck just as much as staring at a blank PS canvas.

You're a frontend developer. I'm coming to your site for the content, not the design. As long as it's pleasant to read I'm happy. Anything else is just a bonus.

You have to come to photoshop with a BIG idea that really excites you. Don't open up photoshop until that idea comes.

Form follows function. But function follows Idea.

The way I see it Photoshop is like the desert part of the process anyway. It's fun designing the site once you have a strong idea leading it.

Let yourself experiment for a while. Just put some crap on the page, don't be afraid to throw it all away. Try different styles and have fun. Also it helps to sketch on paper before committing to a screen.

Reply on news.ycombinator.com