Hacking My (Dot) Life

Hour 2: Wireframing, part 1

If you’re just tuning in, I’m making my friend, Stacy, a website and I’ve assigned myself a project I call “The Project“, where I follow DevTips’ Travis Neilson’s Web Design Walkthrough in the hopes of making Stacy a cool and informative website.

I’m now working on Hour 2: Wireframing.  I decided to break this hour into two blog posts. As I followed Travis’ tutorial on this video, it felt that because he was very familiar with his client, aka himself, I still needed to do some research.

In the first couple of minutes of Hour 2, Travis summarized who his client is and also his audience. I know Stacy’s target audience are teenage students, doctors and clinicians/potential people that would like to contact her for speaking engagements.  Teenagers are her main target so I have to make sure that I can make something that’s not cluttered, will attract a young audience, be informative and have all the information that her main audience will need as well as her secondary audience (again, clinicians and speaking event coordinators).

I had asked Stacy to describe what she liked/needed and she was kind enough to send me examples of four websites she liked. I noticed a pattern  between them all: They were very direct, informative, and eye-catching while three of the four were uncluttered.  The fourth website was a bit cluttered, however it was due to it being very informative and everything was laid on one page.

I wanted to start my wireframing by really concentrating on what engages a teenager.  It’s been about a decade since I’ve been one (okay a little more than that), and to be honest, I have NO idea where teens hang on the internet nowadays. So I did a search on sites frequented by teens and according to Statista the top 5 places teens frequent on the internet in the month of February 2016 are Snapchat, Facebook, Instagram, Twitter, and Kik (messenger).

my old stomping grounds circa dialup:

The first thing I noticed as I was looking down the chart is that most of these aren’t just websites, they’re apps. I then realized that most kids’ connection to the internet isn’t like when I was a teen. They’re not on dial-up, hoping no one calls their house (landline) and disconnected from AOL. They’re out and about, living their life. logging in and sharing through mobile devices.

I then decided to check out a few actual websites on my computer that are targeted at teens. I came checked out SeventeenJ-14, TeenVogue and TeenTech.  With the exception of Teentech, the other websites were pretty simple. And looked kind of… meh. Which shocked me a bit as these are MAJOR companies.  I then checked the same sites on my phone (Galaxy Note 3, if you wondered) and it made a world of difference. The sites are ALL designed to be responsive and they all looked very nice.

I checked out a few other sites and it was the same across the bored.  Even the sites that were targeted at a niche teen market, no mater how crappy the desktop design was, the mobile/responsive version looked at least 50 percent better.

I then decided to check out the four sites Stacy had liked online (none of which are targeted at teens) and none were responsive.  They still looked great, just as they did on my computer, but made for navigating so difficult, despite my phone being basically a midget tablet.

I haven’t even really started wireframing yet, I already see that I need to come up with something that works and looks GOOD on both mobile and desktop devices.  I think I’ll be having a lot of fun coming up with different design concepts for this site.


Leave a Reply

Your email address will not be published. Required fields are marked *