Green Thumb Design & Implementation Guide (DIG)
The week I had to turn this assignment in was the same week that I knew I had to make a few changes in my personal and work life. Were those changes easy even though I had already thought about making them a month before? Absolutely not. It was stressful and being confused about this assignment added to it.
To kick things off, my first thought was that it was a style guide so I used our good friend Google to gain a little more insight into what was needed. It seemed pretty straightforward, but then I second guessed myself by directly typing “design and implementation guide” into the Google search bar. That just gave me more questions than answers, to be very honest. What really threw me for a loop that I was supposed to create this Design & Implementation Guide (DIG) before I even did a proper mockup.
I had basic wireframes completed at this point. I hadn’t even started to sit down and make things look semi-decent, but I attempted to figure it out in the days leading up to class while running on little sleep. (I know, it’s a common thing here.)
And while I submitted the storyboard days early, this was submitted a good fifteen minutes before the deadline. Why am I being very open about this? Because I underestimated how long it would take me to complete this, though I had started it days earlier. I ended up scrapping that first draft. That was a huge lesson. Clear out more time than you think it will take you to complete any sort of creative assignment. Heck, even take the amount of time you think it will take you and multiply it by two, just in case. Haha. You really don’t know when you’re going to have to pivot in another direction.
A high five to anyone who read the word “pivot” and immediately thought of the episode of Friends when Ross kept yelling, “PIVOT!” while moving a couch up the stairs.
Let’s dive into this and I’ll walk you through my process.
Green Thumb - Design & Implementation Guide (DIG) - P1 - Tenisha Rawlins.jpg
Exhibit A: Grid + Space/Proximity
We had to choose three principles of design that we would incorporate into our interface, and while it has been a few years since that was drilled into my head, all I needed was a quick refresher on what everything was. (Note: when you work night shifts and have a messed up sleep schedule, your memory suffers. This is a fact, not an excuse.) For the record, we had to choose from shape, texture, space, unity/harmony, balance, hierarchy, scale/proportion.
GRID
To provide a little more context that I didn’t exactly share in this DIG, the first grid shown is for the articles that would be featured on the main page of the app. Think of the rectangle as the article’s image with the headline on top of it.
The second grid is for both the low and high maintenance plant pages. I wanted them to follow the same grid, with four images of plants. In this case, the name of the plant would appear as an overlay when an image was tapped.
SPACE/PROXIMITY
Since both of these are related to what the messaging aspect of Green Thumb would look like, I wanted the profile pictures and message bubbles to be close enough so that it was easy to tell who said what, but still had enough room to breathe. Does that make sense? In this example, one user sent two messages. (I’ll touch on the shapes on the next page.)
The second example shows how the the message excerpts would be presented on the messages page. It goes like this: Profile pic > Name of user > Message excerpt, with a line to separate each message a user has listed in their inbox.
Exhibit B: Shape + Typography
SHAPE
Bada boom, bada bing, it’s pretty self-explanatory since I actually wrote that part out.
TYPOGRAPHY
I don’t even remember why I felt drawn to the Futura PT family. Maybe because it’s one of those families that has a really good bold heading and with equally good light, regular, and demi weights. What I do remember is that I couldn’t decide what to pair it with. I knew I could have just used it on its own and been fine.
Anyway, one resource I like to use is Typ.io, particularly when I need some inspiration or when my brain gets stuck. If you already have a font in mind that you want to use, there’s an option to search for it and find other fonts that pairs well with it. The awesome people behind Typ.io also tell you exactly where you can find the fonts, provide examples of websites that also use the fonts that are paired together, and you can even search by tags to find the perfect font that fits your needs. My hat is off to them.
That was a very long winded way to say that I used Typ.io to help me find Lato.
Exhibit C: Imagery
Nothing long to explain here. I searched Pexels to find these images. Again, I wrote a little blurb.
Exhibit D: Colours, Buttons, and Wireframes
COLOURS
Now here is where I really went all over the place. I am fully admitting that. Did I even use some of these colours in the final prototype? No. I will say that I also wanted some of the images I chose to have these colours in them, not necessarily to actually use as elements throughout the interface. Out of all of the things that I listed in this document, this is what changed the most. Part of why I chose all of these colours is because I thought we didn’t have the option of changing it and so I didn’t want to limit myself. I found out the same day I submitted the assignment that we were encouraged to change it, especially if we felt that things didn’t work in the mockup we had to produce the next week.
BUTTONS
I wanted some wiggle room with two choices in case I decided in the moment that I wanted the button that had the solid fill or the button that just had the border around it.
WIREFRAMES
We were given the option to use Axure, UXPin, or InDesign to create our wireframes. While I did download Axure and briefly took a tour of it and UXPin, I decided to stick with Adobe XD because I already pay for a monthly subscription. Feel free to view the wireframes here.
Oh, and before I forget, I used InDesign to create this DIG document.
Next up: Paper prototyping and a mockup.