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...

Sketchy resume design

he most important thing to me right now is keeping my perspective. If my goals aren't in clear sight, I get massive scope creep and wind up trying to learn Unix instead of just working on my HTML project (see hereabouts). However, at this stage it's also important for me to be exploring, dabbling, learning everything I can, and even when projects don't work out or seem unreasonable in some way, I do still learn something from the experience.

Take the newfangled resume I created, for instance. It didn't come out quite as responsive as I hoped, largely because of some finicky elements and my avoidance of media breakpoints. What was interesting, however, was talking to a friend who is familiar with hiring processes at a very prominent tech company. He indicated that a good looking resume is nice and all, but what's most important is a) contact info and b) recent experience. The rest is just noise.

In all fairness, programmers are not necessarily interested in shmancy presentation and part of my goal was showing web design skills. However that was pretty irrelevant when I realized I didn't really want to host my resume publicly on my website.

The process was kind of interesting. I had a basic idea what I wanted to do, drew up some rough sketches (above) with actual pencil and paper (I can't handle initial sketching on a screen, sort of like how I just can't stand e-books. I'm a holdover, I know.) Then I entered my content in an HTML document, put it into sections and got the basic structure marked up. From there it was all about CSS, I barely touched the HTML document again except to add some id attributes. Below are some screencaps of the layout along the way, shown with boxes and dotted borders so I could keep track of what element was where. I admit I went a little crazy with the colors...

And yes, I blurred them, because the text isn't the point here. Some of my original ideas were even more abstract, but it became clear that I did need to say something about what skills came from which job. I considered doing this with some sort of clever mouseover thing, where a line from skill to experience would pop up, but decided that was definitely too fussy.

Anywho, one important question that came up in the process was how relative placement communicated relationship and meaning of each element. Elements next to each other would speak to each other in some way and have some relationship. I think I may just go back to my old, boring resume (though with less hideous layout, at least).

... After all that, I'm very done with this stage. Anyone have experience with designed v. functional resumes? Does a different layout affect your opinion of identical content?

EDIT: on structure, I leaned on the HTML outline concept, but didn't include this link here, I don't think.

What color is your flower?

few weeks ago a friend suggested that I fill out the "Flower exercise" from What Color Is Your Parachute? The exercise is designed to help you figure out what you're looking for in a career, and from what I can tell, it's also the core of Parachute (My copy is from something like 1980, and I haven't quite managed to read it). The book actually goes into quite a lot of detail on how to fill out the flower, but you can also just wing it based on the petal titles.

I know, it sounds a little hokey. I thought so too, especially since I thought I had a pretty good idea what I was looking for already, but I went with it. Turns out it's always helpful to get thoughts outside your head, whether to see all the facts in one place, leave reminders for yourself or generate new thoughts in the process. I don't want to make mine entirely public, but here are a few things I'm looking to do in my career:

• Make information widely available and easy to access. That could be something straightforward like library work, or structuring webpages so that users can find what they're looking for plus several things they weren't. It could even be backend support for projects with this as a goal, e.g. part of a multidisciplinary team.
• Help people become inspired to be self-motivated, informed learners who never just say "I don't know," but rather "Let's look it up."
• Provide information services through products that are viable, upgradeable, scaleable and generally future friendly. So, no silos, relative links, transferable data, that sort of thing. 

As for skills, I have profiles on Coursera and Codecademy that will give a bit of an idea what MOOCs I've been fiddling with, and this project should also make it pretty clear what I'm capable of (anything! mwahaha*ahem). Generally: HTML, CSS, JS, some SQL and PHP, WordPress, Photoshop, Lightroom, baking, gardening... 

The other petals include things like: I'd like to work in a sunny, friendly office, with bikeability, sensible benefits, and most importantly lots of opportunity for learning and inspiration from colleagues, classes, workshops, conferences. 

And continuing with the embedding problem, here are some snippets of Parachute from Google Books in an iframe:

One Week Website

ow, in all fairness, this was a very optimistic concept on my part. I can put together a decent looking personal website in a week, no problem. Getting through the entire process I've outlined below, blogging and documenting each step, including research, references, background, backend, comparison shopping, self-analysis and content transfer? Not so easy.

The idea, however, in documenting the entire process is that I, and anyone else who cares to poke around, can review my notes and see the progress I've made and the time/effort I put in to doing a relatively thorough job. Thoroughness might actually be a fault of mine. I have a need to understand everything about a topic, to understand how the wheel works before I drive the car, etc. I can't just install WordPress (WP) and go with it, I need to understand how the backend works, how my data and files are structured, how I can query that database, and why that form is the right choice for me.

This means my initial process is slower than would be ideal, but I think the payoff in the long run will be greater. I have learned to let some things slide for the time being, marking them to revisit later when I have enough background to understand them better.

First, I need to figure out how to track this list. Do I want to Gitify (version track) it? repost at the end of each sub-post? certainly link back to the original list with each execution of a list item. It seems like a version-tracked version I can update and reference would be best... without having to republish every time I make a change. So I'll have to embed the list (published github page) itself:

ps. Yes, this looks ghastly. I need to publish and then iterate. I hear this is a thing you do.
pps. I see the embed doesn't work in Google Reader. Will have to figure that out, too.

What's in a name

When I started this blog I intended it to be an information gathering device, posting bunches of links, reviews, instructions and so on. This sort of happened for a few posts (I'm still most proud of my Smithsonian Craft Fair post), but then I meandered off into journaling territory, posting more photos, recipes, poems, thoughts and whatever else happened to cross my path. In the end, the content has actually lived up to the name I chose in the first place: Renascence Girl.

I've gotten a few questions about why I "spelled renaissance wrong," so I'll explain my logic (something I probably should've done initially).

1. "Renaissancegirl" was taken.
2. Spelled "renaissance" the word tends to make people think of the period in history, or silly festivals where people dress up and make largely inaccurate attempts to reenact that period.
3. I used this alternate spelling because it sounds better in my head. Literally, re-nascence, re-birth, a new beginning, or beginning again. This can mean a new start, or starting something over again, redoing something from the past in a new way.
4. It does also imply the idea of the renaissance man, a person who is a jack of many trades, perhaps not at expert at all of them, but a dabbler. Since I can't make my mind about anything much, Renascence girl seemed like an accurately descriptive choice. You, who have nobly waded through all this, therefore get posts about a wide variety of topics, all tied together simply because of moi. Hoo-rah.

Photo of your semi-faithful blogger courtesy of your .. you get it. From Chincoteague Is., Sept. 2010.

Conflict of interest

Not to sound schizophrenic, but I have a choice here, and I'm of two minds about it (and they keep fighting. In my head). On the one hand, I could be making money (in theory) off this blog. I could monetize, I could use the $100 Google AdWords coupon they sent me (and look into AdSense, too), I could sell something, I could even put a Paypal donation button on here.

Or I could do none of those things, appealing in part because then I have to do none of those things (I'm not lazy, I just like to conserve time). I could have a beautiful, ad-free blog, affix this lovely ad-free blog sticker to myself (er, I mean, the blog) and skip about on my moral and ethical high ground.



I don't really want to expect revenue from my readers, or plague them with advertisements, or, in general, be a sellout. As a librarian, the point of blogging (and life) is to share information with people who need it (even if they don't know they need it. mwahaha.) I realise that just putting up a couple ads and such isn't really demanding anything more from readers than the rest of the internet does, but heck, I don't want to be the rest of the internet. I want my motives for writing to be pure and simple (not that this seems to generate frequent updates).

On the other other hand, I'm kinda broke.

The conclusion I've come to is that as soon as I stop procrastinating and set things up, I'll do a trial run of Attempting To Make Money With My Blog. Comments and thoughts on this whole thing would be appreciated. I'm likely over-thinking it. I'm also trying out partial syndication, so people who get my blog in a feed reader will need to click through to get the full post. Again, thoughts appreciated.

EDIT: That was a dumb idea. "Short" syndication publishes a fragment, doesn't append so much as an ellipses, and therefore doesn't let the reader know that there's more to be had just one click away. If I could get a "read more" link in there it would be fine. Heck, I say, to heck with that.

There's a Calvin and Hobbes strip that illustrates how I feel about the internet, which I wont post here because I'm sure it would incur all kinds of copyright wrath. It's the one where Calvin is standing outside staring at the stars and he yells "I'M SIGNIFICANT!" pauses, then says "...screamed the dust speck."

Lessons learned

Commenting and leaving your website/blog info here and there on the interwebs can actually generate traffic. So sayeth my recent interpretation of the data I've been collecting on this very blog. Before you freak out, no, I can't tell exactly who you are, and if you're on the web you're spreading information about your surfing habits all over the place anyway. I left a comment over on Meredith Farkas' blog, Information Wants to be Free after the CIL2010 conference along with my blog address, and got a few clicks off it. That's certainly one way networking works, and why we should form connections online. (There's a building slowly on top of foundations metaphor here somwhere)

Posting links on certain days of the week, and times of day results in different levels of click-interest. I got a ton of clicks yesterday, and I suspect this is because people were le bored at work on a Monday. I'll have to devise a controlled experiment to test this theory. Maybe posting the same number of links of similar type every day? There are also notable changes in click frequency based on how I've "sold" the link in my tweet or text.

People are more likely to respond to a post or a link if they can see that others have done so before them. Facebook posts with lots of comments or clicks get shuffled to the top in the "Top Stories" feed, and if there are several comments saying "omg, so cool" and "this is great!" everyone else will click, too.

Which brings me to the irritating point that people are frequently more interested in visual content than in text. (this post is already screwed) This generally makes it difficult to communicate information to people because they are lazy or unwilling to go through all the trouble of reading. The blog Information is Beautiful takes advantage of this by posting awesome graphs, diagrams, charts and whatnot that are visually interesting, full of information, and make their point. I admit that I am also guilty of this trend. When I go through my Google Reader feed at lunch every day I beeline for the "pretty" items, the webcomics, and posts I know will be brief.

I'll just conclude by saying that posting interesting, wordy content and creating a reader base isn't as easy as one might think.

(if I put a kitten here, would you be more interested? another future study.)

Brevity and selection may be hard for me...

Alright, here's a post at last! I've been meaning to write an actual post for a while now, and have a list of subjects to discuss, but what actually spurred me to get all this down was a massive reading list on google reader this morning and a potential library job in my future. So, here's a run down of a few things I found interesting:

INTERNETS
Among all the sites on the web that "foster the qualities of 'innovation, creativity, active participation, and collaboration'" (according to AASL through SLJ) are a few of those that I've recently been prodding. Certainly most of the sites listed are more traditionally educational that Facebook, Google Reader and Twitter, but I appreciate the recognition of alternative learning resources. GReader and Twitter in particular are great for finding and following interesting feeds (and twits, as I like to call them. "tweeting" is just so... cute?). Clicking through links and finding more and more information can be very addictive, as demonstrated by the massive number of tabs I have open continuously.
Also on the subject of internets and social sites, apparently tagging is becoming important as a reader advisory (RA) practice. Being kind of new to this, I don't know much about RA in general, but I'd bet it's a lot about knowing your collection (and beyond) and being able to help patrons (or whoever) find things that are good for them. Apart from *actually* knowing every book you've got, there are always jacket blurbs and being familiar with an author, if not the book specifically, to help with advising on a reading choice. That said, if tagging were to be used on books, it would be.. why, it would be like the subject index in the card catalog. No? Nevertheless, imagine having a tag cloud for your library, like mine, here and having everyone find books they might like through it.

And also in the world of reference and internet and research, credo reference is gathering reference engines and working with IP adresses to make getting access easier. Haven't had a chance to look into it yet, but definitely something to keep in mind.

BOOKS
In my absence from the public library scene, it appears that a new genre has developed. Mostly blamed on the massive trend towards porphyria in fiction, urban fantasy also covers other elements of fantasy in a gritty, reality-based settting. Presumably, this brings the traditional fantasy world closer to home, elevating the believability factor and perhaps making it easy to approach for readers today.

Here's a list of books about, well, books, from Library Journal. I can't say a lot about it because I haven't read them yet, but several will certainly make it to my (epically long) "read right after I've read all these other books" list. Someday, someday.

Whoa, Internet spaz-fest

It's always oddly awkward starting a blog. You have to find something enticing to draw people in, not over-do it, don't post every hour, get your formatting decent (without posting about what a hassle that's been)... So here I am, guys.
I'm also here:
Facebook (for RL friends only)
Delicious
Twitter
LibraryThing