Web Design Process: Yet More Lists

ll right, first things first. Before I go trying to put my website together willy nilly, I need a plan, a master list of desired components and functionality, and a general idea of how to get from here to there. Disclaimer: I have not actually done this before! I've worked on sites designed by someone else, I've done some super basic HTML/CSS work (like my pesky resume and my placeholder website), and I've certainly spent plenty of time thinking about it and reading and researching. So here goes:

Things I'd like from my site:

• A Gallery of photos: no commenting, prints for sale, easily populated (Lightroom export?), cataloged by keyword, location, highly searchable, and someday I'd like it to include interactive collaging
• About/info page: bio 
• Contact: email, links to me elsewhere like twitter etc, RSS for photos and blog?
• Blog: old posts from blogger + new posts, shiny layout, browseable, comments, share buttons
• Portfolio: other design work, samples, articles, projects, certificates, whatever else
• Someday: a sandbox area near the portfolio for projects in progress, something to do with Github? 
• Aesthetic: simple, lots of white space (or black space), nice OFL (Open Font License) fonts and thin lines, simple image display, good navigation, one animation/movement/interactive element on top page. 

The basic steps outlined below are a combination of my notes from several sources. I learned most of the prototyping and user-testing steps from a class called Human Computer Interaction taught online by Scott Klemmer from Stanford. Not my favorite class on Coursera due to some frustration with the peer-grading setup, but nonetheless informative.

I also discovered that a local web design etc firm called Clikzy Creative posted their entire design process to their site so that clients will know what they're getting into. My process will be a bit different, of course, but it's good to know how a more formal environment would handle the same task.

• Essentially: "Discovery, Site Map, Content, Wireframe, Mockup, Revise, Develop, SEO, Launch."

The Moxie Design Studio also has their process up on their website. They do a bunch of websites for local Alexandria businesses, so I had seen their work quite a few places already. They also list a general set of project prices on their site, which is somewhat unusual, but very helpful since I had no idea what I should be charging for my work.

• So again, an essential process looks like: "Discussion, Goals, Mockups, Revisions, Development and Programming, Soft Launch and Client Training, Full Launch and two weeks included Support." 

It's really hard being independent and not letting clients take advantage of you by asking "just a quick question" that actually takes half an hour and is billable. And that's just one reason I'd rather not work for myself!

Back to my own website. A few basic steps to get there:

1. Define required elements - site map (above)
2. Find appropriate platform
3. Wireframing, prototypes, mockups - grids?
4. Testing it on unsuspecting potential users - feedback and revision
5. Build, develop, whatever you want to call it
6. Design details/ illustrations? Finishing touches
7. Later additions: animation, better databases? E-commerce... 

Each step along the way will probably be a bit more involved, but that should give me a good starting framework to go on. Don't mind me if both my website and blog suddenly disappear while I'm shuffling things around...

Gitifying the OneWeekWebsiteList

ote to self: document as I go, not after the fact. It felt a lot like I was running in circles trying to find documentation and n00b help as I was working on this, so I didn't take notes along the way. A lot of the point of this first step was to familiarise myself with a few new systems (Git, GitHub, Terminal, Unix command line, Vim), as well as just publishing my strategy for creating a bigger, better website for myself. The entire project is more about learning than having a finished product (although it would be nice to sell a photo again, someday), so each post is intended as a reference for myself, as you'll note from the links peppered throughout the text below.

I apologise in advance, too, for these posts likely being very dry, incoherent and plentiful. I'm often writing from the top of my head and focusing on developing and documenting rather than fine literary prose. Coincidentally, my horoscope for today:

Once you break down a task into manageable chunks, you'll discover that your challenges are not really that hard. You are absolutely capable of meeting the goal you projected at the beginning.

Essential breakdown of Gitification of The List:

• Wrote project todo list.
• Thought about purpose and use of list- dynamic, changing, updating steps as I go to keep track of overall process.
• Translated list into HTML 
• Created GitHub repository (repo) for new project, cloned repo onto local drive
• Updated and committed ReadMe file on GitHub
• Discovered that this threw my local clone out of sync, figured out basics of git pull.
• Finally figured out how to control the vim editor in Terminal (thanks largely to the patient human who helped me with basic commands) to add messages to merges and commits when I forget to use the -m option .
• At this point, the list was basically done, and pushed to GitHub. 
• Researched how to publish a repo to the web so that it looks like an actual page. I had seen a friend do this with a basic design portfolio, but couldn't find a simple button to push in order to see repo files in anything other than raw code. 
• Turns out I had to create an entire new branch in my repo, move everything, and when it still didn't seem to be working, realised I had left off the obvious !DOCTYPE declaration.  Actually, I could have just left it and popped in a reference or something. oh well.
• Had also found this Google Style Guide, which mentioned that some element tags are optional in HTML5. So I guess my dunderheadedness over formatting my initial list file wasn't actually critical, but I haven't implemented the recommendations yet. Also ran it past a W3C validator. 
• Meanwhile, I just need to get the published OneWeekWebsiteList.html into my blogpost, somehow, in a way that would save me from updating said blogpost every time I modified the original file. I found the embed element in the HTML5 spec to be a simple solution. Presumably there's some way I should have done this with PHP or scripting or one of those things I don't know how to do yet.
• So, one properly sized embed element and a div element with simple border later, the list mostly worked as dynamic content. 

Unfortunately, I couldn't discover until after publishing that the embedded HTML file doesn't display in Google Reader. It's visible in the RSS feed itself, so the problem comes somewhere in the aggregator?

I would love to hear about better solutions to this problem, as I just went for the first option I could find in the interest of moving forward. I've also just now switched to an object element, since embed seems to be intended for non-HTML content. Any thoughts?

I have no words

Last fall I was beginning to explore ideas for my Plan of Concentration project in the world of children's books and attended a book making workshop with Linda Lembke of Green River Bindery. At that point it was my intention to create my own wordless picture book using my own photographs to tell a semi-autobiographical story. The original concept was a little too much to execute in the time I had, so the eventual product was simplified considerably (result is the purple book with the leaves at left). Now apart from the fact that the Brattleboro Museum and Art Center (BMAC) is awesome (It's one of the things that enamored me to Brattleboro in the first place, thanks to an Andy Warhol exhibit) there's the fact that I love children's books and bookbinding as an art. So, all of this led to my being at an exhibit of artwork from Kaori Hamura's book Dream Seasons, a wordless narrative illustrated with stylized paintings on wood (if you like paintings on wood, also check out Audrey Kawasaki). The exhibit also included a list of other wordless children's books and related works, and I thought I'd share some of it here. The list was originally produced by BMAC, but I'm adding a few books of my own, as well.

Wordless Children's Books
David Wiesner is pretty good at purely illustrated stories, and wildly popular, too. My favourites are Tuesday, and Sector Seven, but there's also Flotsam and Free fall and a few others. He's very adept at putting the extraordinary into a context that makes it seem quite, well, ordinary, as in the cloud factory in Sector Seven, but while maintaining a sense of wonder, as in Tuesday.

Chris Van Allsburg put together a book of illustrations that are explained only by a single line of text that merely alludes to a greater, unknown story and inspires plenty of speculation among readers. The Mysteries of Harris Burdick goes under wordless books for me because so much of the value of the book comes from what the reader's mind creates to fill in the whole story behind each illustration.

The Arrival by Shaun Tan is just a plain beautiful book. It's more of a graphic novel, with many, many detailed illustrations in order to get the story across, but still with plenty of room for imagination (which is what I think wordless books are really all about).

A few more, which you may look up on your own (builds character):
Home, by Jeannie Baker
Museum, by Barbara Lehman
Oops, by Arthur Geisert
The Red Book, also by Lehman
The Snowman, by Raymond Briggs
Trainstop, also by Lehman
Un-brella, by Scott Franson
Yellow Umbrella, by Jae-Soo Lui

If you're into this sort of thing, go check out the tag lists for Wordless, Stories Without Words, and Wordless Books on LibraryThing.


Do you prefer book links to LibraryThing or to Amazon? I think LT provides more information on a book, but if you want to go buy it right away you might want Amazon. However, I highly recommend hunting down books at your local bookshop, or at least clicking through a website like FlashlightWorthy, which provides awesome books lists and could use some support. If you're actually reading this, why not comment? Comments are constructive!

Wishful listing

Dear Santa,

This year for Christmas I would like to receive the following...

My computer has been acting up lately, fighting back against my overuse by occasionally turning itself off and complaining constantly, or just refusing to comply with my commands. Don't get me wrong, I love my little iBookG4, especially because it still runs OS9 applications (read: games, aka Power Pete, which technically came with OS7), but if I could relieve it of some of its burden we'd both be happier. I'm torn though. Since I also need my computer to be able to handle advanced graphics work, a desktop with a tower and wide-screen might be best, but I'd also like a more competent laptop... For now, the 15 inch solid state MacBook Pro (previous link) would fill in fine; I can always add the larger display later. And the Mac Pro Nehalem can just wait until I pick up the Epson 9900(with orange and green inks. whoa).

Meanwhile, my communications capabilities are suffering from another case of outdated technology. Three years of being in my left pocket have been hard on my Nokia. At the same time, my ipod classic did the thing ipods do and broke its headphone jack, and quite likely has a hard drive failure as well. My immediate thought was to get another ipod, but as it turns out I might as well get an iphone 3GS 32 GB and solve both problems at once. And again, the solid state drive will help a lot when it's bouncing around in pockets and bags. Next issue: bluetooth earbuds/headset and laser keyboard (although I'd prefer if it were a smaller device. If only someone would develop it further!).

If I'm going to be getting that Epson 9900, I should really also have a digital camera. I'm conceding the point of digitization in photography only because buying a few medium-large format film cameras (with lenses and different backs), learning colour processing and setting up a colour darkroom (or at least getting a film scanner and settling with the printer) all poses slightly more difficulty than spending a few grand on two pieces of equipment. A quick browse through some old Photocritic posts pointed me at the Nikon D90, but further research and recommendations are welcome.

On a less selfish note, a good way to connect with other artists/photographers in the area is to hunt down your local darkroom. The Washington School of Photography, for instance, has a camera club and workshops for community members.

...Anyway, Santa, I don't know how to prioritize my phone, computer and camera needs, but there you have it. My best to Mrs. Claus and all the elves. See you in two months!

Yours,
Elli