Hour 2: WireFraming, part 2

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 was going to break this hour into two blog posts, but it might take three, we’ll see.

I decided to use my hour long commute to work (thanks MTA) on the actual wireframing based on last night’s discoveries.  I started off playing around with mobile design, as that’s our main concern based on our target audience.  I came up with a few ideas:

I want the site to look interesting, but at the same time, I don’t want to fix what isn’t broken.


I was a bit stressed out because there’s only so much you can do to make your site stand out and be a little different from other mobile sites.  I then did a few desktop sketches, which I seemed to enjoy a bit more because there’s more real estate to work with on a monitor screen.  I remembered that overall, we want it to not be cluttered, which made me realize that’s why the mobile wireframing was hard for me.  How do you make such a small screen NOT seem cluttered?  I’m determined to accomplish having a tidy, clear, and uncluttered site.


So far, what I do know is, that I would really like to learn a new skill while working on this site. I’m thinking that’ll be Sass. Because, I want to be sassy.  No, I’m just super curious to why people refer it over bootstrap.

I’m leaning towards the first two ideas, however, I see Javascript and lots of jQuery in my future.


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.



Hour 1: Discovery


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.

Travis spends the first two videos (total of a little over 45 minutes), just speaking and wireframing and brainstorming and you walk with him through the process, it’s amazing.  The third video is just the visual designing process, for which he made 2 videos.

The first video is over two hours long and you can see in DETAIL what his process is, another is under 10 minutes and it’s the quick version.  I saw the first half-hour of the first video and the full short video.  It’s hard when you have an active kid running around, but trust me, I WILL be watching that two hour video, soon.

In his first video in the series, Hour 1: Discovery, Travis asks the following questions:

  • -Who is the owner?
    • What is important to me?
      • What are they trying to convey? What do they want to share?
  • -Who is the audience?
    • What is important to me?
      • Why are they visiting this page?

I saw his process was similar to how I started things when I first got my friend Stacy to tell me a bit about her project.  I asked her what message she was trying to convey and who was her target audience. :Let’s answer the questions:

  • -Who is the owner?
    • Stacy: Speaker, Teacher, Author
      • What is important to me?
        • 1.  Helping others by speaking about my personal journey with Bipolar Disease and DBT.
        • 2.Share about my (Stacy’s) experience so that others going through it know they are not alone and it is treatable.


  • -Who is the audience?
    • Students, doctors, prospective boards that might want to hire her for speaking engagements.  The target is mainly students, who in Stacy’s case tend to be teens. They’re our main focus group.
      • What is important to me?
        • 1. Easy to discover (borrowed this one from Travis).
        • 2.  Learn about bipolar disorder and DBT treatment.
        • 3. Contact Stacy

Next we move on to what we need in order to address  Stacy’s needs and the needs of her audience.  Here’s our list to help meet our needs.

Features Stacy needs (in no particular order):

  • About
  • Information regarding the classes she teaches.
  • Information regarding DBT/  link to DBT website)
  • Videos where you can see her at speaking engagements
  • Stacy’s book, “Loud in the House of Myself” (page or link to purchase her book.) and latest book.
  • Contact info and links to social media.

Next post: Hour 2: Wireframing.


Moving on up…

Apartment hunting, moving, and settling in to my new place while implementing new routines have consumed up most  of my time the past few weeks and again, my little blog went without updates (but never forgotten).

I’m still slowly working on the plan to design a web site based on the DevTips walk-through. See previous post for all links, as I just noticed the time and I have to get to sleep!

Once I find my notes which, by the way, I’ve redone TWICE, I’ll write out episode/hour 1. I keep putting them in a safe place to protect them during the move and end up hiding them so well that I don’t remember where I placed them and I haven’t come across them in my unpacking.  I’m seriously taking my time unpacking.

I’ve noticed that lately I’ve been telling more people I am a newbie coder/web developer and EVERYONE seems to want to work with me.  They haven’t seen my work, they just want me to build thir stuff, because they don’t know.  It’s scary bt liek a friend I was talking to today said: just jump in. Being scared is good, it makes you real, and human. It makes you WANT to take this more seriously because you don’t want to let others down. Just jump in and do it.

Now that I’m seeing how much free time I have in the evenings, I’m jumping in and restarting FreeCodeCamp.com AND  freelance web design AND be a mom AND have a full time job unrelated to tech AND start 2 companies with friends. Overzealous? Nah. Taking on too much? Nah. I need to get this empire started and take over the world. #girlpower