Hacking My (Dot) Life

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.

20160324_001735.jpg

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.

20160324_001744.jpg

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

Because time, it’s not on our side

Things that seem like they’ll be a 5 minute task turn into hour long ordeals. I think I’m pretty much done with the first version of my client’s site, which should’ve been done last Monday. We’re already visualizing where she’d like to take the site and what it will to look like.

The one main thing I’ve taken from this first site is that when you take over a project for someone else you should communicate with the client as much as possible when you initially take over. Last night was the first time I really communicated with the client and saw where they’re head is and what their ultimate goals are.  It’s really motivating to me to see what people are working on, hear their passion and what they want to share with the world.  It makes me want to help and make their vision come to life.

The Project

I hate that I feel guilty about not writing more often. I think about this blog CONSTANTLY, but feel bad because I should be working on someone’s site, or doing a tutorial or helping someone else with something or taking care of something else and I just can’t do it anymore.

I’m convinced I have not finished other tasks because I have all this stuff I want to share and can’t because I feel guilty putting this blog first, even though that’s just want I want to do.  So, despite finally getting a little time to work, I need to put this first, because in the end a happy developer equals a happy worker.

Two weekends ago I discovered DevTips on youtube.  It’s crack, go watch.  At one point I wasn’t even watching,  but listening.  I was working on a site and folding laundry and dealing with my son and this guy, Travis Nielson is such an eloquent speaker.  He’s real, funny and relatable.  He used to be a salesman and now he’s a poscaster, writer , coiner of the phrase “full-process designer” and on top of that, a husband and dad.  This guy is living the dream.  From the youtube channel I followed him on his twitter and discovered his podcast, TravandLos which he co-hosts with his friend Carlos “Los” Montoya, another designer (and Hispanic, representing).  Los is like the big philosophical zen older brother you wish you had.

My obsession with DevTips is a mild crush compared to my instant love of this podcast.  Their tagline reads that it’s  “about being a healthy and productive professional in todays creative economy” but in actuality feels more like life advice on how to become a better, more rounded uman being.  It’s funny, insightful, educational, makes you think, makes you inquire and self-reflect on not only your career but your life as a whole.  I recommend that you go and check it out ASAP. It’s become my FAVORITE podcast of all the ones I listen to.

I’ve downloaded all the episodes and have heard most of them.  The ones I’ve heard and liked I’ve listened to a few times and it’s only been 3 days  since I’ve been listening.  Heck, I’ve been listening DURING work.  It’s so positive and inspiring. I would liek to get into episodes and give you clips but I have more I need to write about and not enough time prior to bedtime.  Just check it out, you won’t regret it.

So, taking a step back and going back to DevTips: As I was watching/listening to these videos I checked out the videos list and saw that there’s a playlist on DevTips called “Design and Code my Personal Website“.  In this series Travis walks you through his process on how he basically comes up with designs. It’s just the thing any person that wants to design and wants to see the creative process needs.

I was so inspired by just watching the first 2.5 videos that I got an amazing idea for a personal project.  My friend Stacy heard I was tinkering with making websites and we somehow got to talking and I told her I would  revamp her site.  I’m really bad (or should I say good) at procrastinating and aside from a wireframe and taking down notes, I really haven’t gotten started. I figure I still want to work on this site, and Bless Stacy for not finding anyone else to work on her site,  I decided I would follow the DevTips’ series and use it’s lessons to create Stacy’s website. Best part: You all get to see the process.  I figure that I’ll do a post per lesson.

I’m really excited to go through this process and see how I feel as I go through with it.  I’ll be starting this weekend, because who really cares about Valentines? I love myself so much I want to gain new skills and make something cool all at the same time.

 

 

2016

Happy Belated New Years!  I haven’t been ignoring the blog or forgotten about it. I’ve actually been wanting to write about a lot of things going through my head.  On New Year’s eve I saw that this blog is over two years old and I am not near where I wanted to be.

I have to come clean and be honest: I don’t know if I EVER want to learn a back-end language to build an app.  I think having to learn things I don’t WANT to learn right now is a part of what is holding me back a little.  I want to make things pretty and use psychology and Jedi mind tricks to keep you engaged on websites that I’ve designed.  I want to manipulate your time with my great use of typography and my great eye for color selection. Maybe I’ll make a sexy drop down menu that shimmies to the left to reveal sub-menus, but that may be the furthest into “programming” I’ll ever want to go.

 

“So what? Who cares if you want to be a designer that codes?”  It’s not that I care that you care.  It’s that I’m a bit elitist. I know how programmers are looked at: Like geniuses, engineers!  While front end developers/designers are just seen like artists, painters or “architects”.  We can make things look good, but can we actually make them work?

2015 was a year where I confronted myself and decided to live the life I wanted to live, and the first thing I did was to be honest with myself.  So here I am being honest with myself:  At this moment in my life, I want to be a designer who codes.  Whatever official title out there for me, that’s fine.  I don’t want to get bogged down with titles and names.  I’m an artist. Point blank.

 

Bonfire: Factorialize a number

While doing this (yet still unsolved) bonfire I came to realize that my life long issues with math  lies in not really wanting/caring to know the names/title of the parts of an operation.

With this Bonfire, I wanted to do it all on my own and my biggest hurdle was figuring out what goes where.  I sat and REALLY looked at the syntax that was provided:

 

Capture

 

Despite my having taken that JavaScript class, and doing little tutorials here and there, I have the bad habit of following the instructions but not paying too much attention to the explanation of what things are.  How can I know what’s missing if I don’t really understand what’s currently there and what I need to fill in.  Again, I read things, I analyze it, I do it but It’s when I sit down and really ask myself “WTF am I looking at”, do I really start to feel the information sinking in.  I know most of my posts touch a lot of HOW I learn and not WHAT I’m learning, but the thing that has been on the forefront of this journey is learning and seeing HOW I learn so that I can maximize and effectively learn this content.

So, on my journey to figuring out WHAT I was looking at, I came across LearnCodeCademy’s revised Javascript Youtube Tutorials For Beginners – #3 Javascript Functions .  I must have watched it over 5 times, pausing, analyzing what the parts of a function are, exactly how return works and a break down of a function what what the parts that make up a function are and what can/won’t happen if you place things a certain way.  I have read what it is MANY times and have been explained how return works, this is the first time it sinks in and makes sense to me (no fault placed on prior tutorials or teachers).

To sink in the content more, I reread the section of Jon Duckett’s Javascript book where it explains functions, what they are and how they work and I was able to comprehend and see and recognize the parts of a function.

I still haven’t been able to solve the Bonfire, but now I’m not staring at it wondering where I should “plug something in”.  I now understand the following:

  • why factorialize (5) is at the bottom (so that I can call it, and I can do so as MANY times as I want).
  • Once a value is “returned”, that’s it.  It’s over.
  • Scripts aren’t read in order, the way HTML is read.  Learning that cleared a LOT of my confusion.

I haven’t yet solved the problem, but based on what I’ve learned so far and the explanation that the Bonfire gives for what a “Factorialize” is, I’m thinking I might have to do a loop in order to solve the Bonfire.

Come on Baby light my (Bon)fire;

I finally made it to the Bonfire section on Freecodecamp. I was very excited until I hit the first real one. It seems simple enough, just reverse a string. They suggest reading material from the Mozilla Developer Network and suggest that you may need to convert the string into an array before you reverse it.

Seems simple enough.  I first decided to use the waypoint samples to guide the way I write the syntax. But that didn’t work.  I see that when doing the waypoints, you miss out on understanding the syntax because you don’t fully type in all the code to make you progress to the next wayline.  You just learn to understand the basics.

I read the literature that they suggest (in case you’re interested it’s: Global String ObjectString.split()Array.reverse()Array.join() ) .  It’s a little too technical for me to comprehend most of it, and that made me feel stupid for about a good 10 minutes.

I went back to the bonfire and read the instructions.  Then I read them line by line, as I was taught to do in my Project<code> class, and it started to make sense, the gist of what some of the steps that I have to do.

  1. turn the string “hello”, into an array.
  2. return it so that it reads “olleh”.
  3. it must be returned in a string.

I went back to seeing the waypoint sample lessons and looking at the code we aren’t allowed to alter and started putting that into my text editor and nothing.  I was tempted to jump on the FCC Gitter Channel and ask for help, but decided to google the exercise and see if anyone had the same concerns I did in Quora or some other forum. Instead I was pleasantly surprised to come across Wulkan’s blog.   Wulcan’s blog had the answer, but most importantly (and sacred) to me, it explained the Mozilla literature in plain English!  I sat there are read Wulcan’s paraphrased definitions and reread the MZD information and it’s starting to make sense to me.

Off I go to try to see if I can come a full circle.  I was too excited to wait until I figured it out to share.

 

Instinct leads me to another flow…

I not only went back and did the chapters on Freecodecamp that I had previously done before they revamped their lessons, but I also surpassed what I had done.

At first I was a bit nervous since they give an estimated time of how long each section should take to complete. I breezed through the HTML, CSS, jQuery, and Bootstrap waypoints.  The Basic Javascript chapter wasn’t too too bad, but I started getting challenged when I hit the Object-Oriented Functional Programming chapter.  It started off okay, then got a bit more difficult, not in terms of content, but in terms of how you think about code and creating “objects”.  It’s hard for me to learn to envision how something can be utilized when you don’t really understand what it is.

What I found made it difficult for me was not understanding what certain keywords meant. For example, I know what “parameter” means, but in terms of coding, I didn’t.  There were a lot of things I didn’t understand as I went along, but I wrote down notes and questions for me to research when I finished the lesson.  I could’ve probably stopped in the middle and researched it, but I get distracted when I do that. I finished the chapter and realized I FINALLY made it to my first Bonfire! I was so excited, until I got to Bonfire #2 and didn’t understand what I was supposed to do.  At this point, I was 2 hours into coding and decided it was bedtime.

This morning during my commute, I pulled up my Javascript and jQuery by Jon Duckett and realized that the part I couldn’t get passed reading is EVERYTHING I had been working on last night.  Reading about concatenations(joining new strings), what’s a parameter (a variable within a function), and constructor function(function that describes the object being made) made sense.

I think my study style for  Javascript has finally clicked:  I work through things, even if I don’t understand it. When I finish the lesson, then read up on it. For some reason when programming, if I read something and THEN put it to use, it never clicks, there’s just no connection. But if I do it first, and then read about it, a light bulb goes off.

I’m really excited. I’m starting to get this.  Now off to check out this bonfire before bed.