Roadmap to Baby (Announcement Site)
Let’s get this out of the way: I am not, in any way, shape, or form, having a baby anytime soon. But come July, my sister is!
Like any enterprising designer, I’m always looking to build my portfolio. This is the story of how I came to make a baby (announcement site).
Brainstorming
On one of my last days at my CTP internship, I was light on projects and looking for new things to do. I wanted to build my responsive design skills, ideally with a project that lived with purpose.
Cue baby.engquist. It seemed like a fun idea: simple, cute, and painless.
My first ideas focused on content needed. I sent that first round to my friend Maddie to see if I was being crazy or if this thing was worth pursuing.
Round two (or 1.5) was more about functionality. Who are the site visitors? My sister’s friends, who are millennials or Gen X, but more importantly: our family, which includes older generations that might not be as tech-savvy. Since this didn’t need to be loaded with content, I thought a one-page layout ideal, with links elsewhere if needed. Obviously it needed to be “really freaking adorbs” because, well, it’s a baby site.
As an added bonus, I thought it’d be nice to cater to our Taiwan-based family to have a Chinese version of the site. (Translated by my mom, since my Mandarin is… rough.)
Realizing the Idea: Wireframes & Feedback
When I pitched this to my sister Alicea, she was excited (yay!). Even better, my brother-in-law Jon had done me one better: he’d already purchased engquist.com, so baby.engquist.com was free to me.
Knowing this brain nugget could be real, I moved onto style wireframes.
Colors: I’m a huge fan of bright colors, but to stay gender-neutral, I chose more neutral accent colors like oranges, yellows & browns.
Fonts: Body text had to be a fairly universal font, but headers could have pizazz. I shopped around Google Fonts for options between whimsical and useable.
I attempted to use a free Zurb app (Bounce) for feedback because I wanted to play with Zurb tools. But they replied via email and picked option 3.
Stop: It’s Poster Time
They wanted to announce to the public in December/January or so, but I wasn’t quite ready to code.
Jon had this film poster announcement whipped up, so I quickly coded a simple html page, added a sticky footer, and added some @media CSS to make sure it was responsive (I had a hunch some people might be viewing this on their phones).
And then… I moved onto other projects (i.e. job searching).
Detour: “Anchor” away
I’ve been shopping around CMSes for awhile. I’ve hard-coded most of my design life, but when making stuff for other people, that’s not an option. I’m not loaded, so Squarespace is out. Wordpress was a good starting point but not the most user-friendly.
I’d heard about Anchor and rediscovered it now: bonus points for being built responsive, even more bonus points for having a clean and beautiful dashboard. While I’d poked around in Bootstrap, my old co-worker recommended Foundation, so I combined the two as my baseline for another project: my own portfolio (desperately in need of a redesign).
Portfolio sites are good learning projects because they have specific function and also require a lot of specific function. I tested responsiveness on my own iPhone 6, but also user-tested via my friend Sarah. The trickiest bit was the navigation menu (aren’t they always?); the even trickier bit was when I completely failed at pushing it live, but that’s another story.
It’s a Boy!
Jon and Alicea brought the project back into focus with announcement-worthy news (it’s a boy!), which finally kicked me back to baby.engquist, which had been languishing in its poster-only state for awhile (my bad).
Installing Anchor on a test site, I got to work. I found out Foundation had both parallax background and profile card building blocks, which made my job way easier, and after the initial laying out of features, I set about jazzing the thing up with scripts (I needed a countdown one anyway).
Since Foundation uses jQuery, I just found some scripts by other people: Back to top, Smooth scrolling, & Countdown.
Because I’d inadvertently copied over my personal favicon, I decided to make one for baby.engquist. I opted for an egg for simplicity and scalability.
After some “client” feedback and testing with Sarah, baby.engquist was finally born. The site, that is.
