DEV Community: Kathy Jean-Joseph

Day 2 of #100DaysofCode: Comps & Wireframes

Kathy Jean-Joseph — Mon, 23 Nov 2020 08:11:02 +0000

Original date: July 25, 2020

Today’s Topic: Comps & Wireframes

In my SkillCrush course, this particular module is in the Web Design Fundamentals Course.

The focus was on creating a wireframe for a personal portfolio page.
Main Notes:

I created a style tile to guide the design with typography, colors, gradients and buttons.

I create a lo-fi wireframe via Photoshop.

I made a hi-fi wireframe via Photoshop.

Main Takeaways:
I really like web design.

I don’t mind making web comps but making them intuitively and with a higher grade of discernment of usability and simplicity is going to have to be the next focus.
I’m partial on lo-fi wireframes.

It’s a little harder for me to visual what I need with a lo-fi wireframe and maybe that’s just because I haven’t seen lo-fis in the brainstorming process with like a team but on my own, probably not my go-to thing.
Making the wireframe, I realized I may be handing my developer a headache.

The thought came to mind that I may be designing something with functionality and intention but I have to be aware of the languages that my team and company are currently using to know whether we have the bandwidth to create certain features.

Beyond the course:

Download Photoshop:
https://adobe.com

Cool Stylescape Tutorials (YouTube):

Find Me Elsewhere:

If you’re new here to the #kathycodes journey, let me start off by saying Welcome! 🎉

This is my first round of #100daysofcode so I’m starting off as a beginner and I’m learning with Skillcrush — Break into Tech course

I’ll be documenting my journey in several ways, if you want tidbits find me on twitter at @kathyjeanjoseph to view my to the day updates of my journey.

Visual? I’m on YouTube and view me in action and a less detailed version of my problems, solutions and takeaways.

Day 3 of #100DaysofCode

Kathy Jean-Joseph — Mon, 23 Nov 2020 08:08:12 +0000

Day 3 of #100daysofcode:

Brand Identity

Today's Topic: Brand Identity
On Day 3, I worked on Brand Identity in my Skillcrush Course. It was meant to lead into web design and comps as well which is why I left as a part of my 100 days.
The focus was on creating an identity for a local based coffee company.

Main Notes:

Inspiration

I went scouring the popular places for ideas of the feel of the brand.

Sites I used:

• behance.com
• dribbble.com
• pinterest.com
I knew I wanted a rugged homey feel and ended up going for a rubber stamp look for the overall visual theme.
Bossa Nova designed by Lisa Jacobs - dribbble.comSurfCoffee Roasters / Leaf Coffee Roasters designed by Tugg Studio - behance.net

Naming

I chose the name, the Good Grind from a short list. I thought it was catchy and liked it. It also wasn't taken so I was not going to get any copyright infringement that would hinder my creative process.

Color Palette

I didn't really go looking for a color palette. I knew I wanted to use a multicolor option with brown, green and beige as the primary colors due to my UVP for the brand.

UVP

The Good Grind is a sustainable, coffee brand. 80% of items used or sold are either reusable or recyclable. We are a no-plastic brand so items such as straws are made with either paper or metal. All coffee bags are made from burlap, paper, cardboard or for a premium - metal.

Customer Avatar

Family-friendly, millennial-first brand. Think the local coffee shop where students feel comfortable enough to study, mom groups stop by during their day to chat and enjoy a cup of coffee and local businesses are often seen partnering and stopping by. Large emphasis on approachability and relationship over scale.

Main Takeaways:

1. Rubber Stamping from scratch is hard.

I don't recommend it personally but I liked my end result.

2. Iconography can be fun.

I created these icons from scratch via Illustrator and just thinking about what I may need and how it may be used was fun.

Icons:
• menu
• food/boulangerie
• tea
• shop
• events
• gift (for gift cards)
• certified b corp
• kids
• gluten free
• vegan
• vegetarian friendly
• envelope (for newsletter)

Beyond the course:

Some of my favorite clean/sustainable businesses that I used to think about how to model my UVP include:

thebeautycounter.com - grovecollaborative.com

Find Me Elsewhere:

If you're new here to the #kathycodes journey, let me start off by saying Welcome! 🎉

This is my first round of #100daysofcode so I'm starting off as a beginner and I'm learning with Skillcrush - Break into Tech course

I'll be documenting my journey in several ways, if you want tidbits find me on twitter at @kathyjeanjoseph to view my to the day updates of my journey.

Visual? I'm on YouTube and view me in action and a less detailed version of my problems, solutions and takeaways.

Day 1 of #100DaysofCode: Learning UI Design Patterns

Kathy Jean-Joseph — Sat, 19 Sep 2020 09:38:54 +0000

Introduction

————————————

If you're new here to the #kathycodes journey, let me start off by saying Welcome! 🎉

This is my first round of #100daysofcode so I'm starting off as a beginner and I'm learning with Skillcrush — Break into Tech course

I'll be documenting my journey in several ways, if you want tidbits find me on twitter at @kathyjeanjoseph to view my to the day updates of my journey.

Visual? I'm on YouTube and view me in action and a less detailed version of my problems, solutions and takeaways.

Today's Topic: Learning UI Design Patterns.

————————————

In my SkillCrush course, this particular module is in the Web Design Fundamentals Course.

The focus was particularly on defining UI, Intuitive Design & Design Patterns & Trends.

Main Notes:

————————————

User Interface: How your site graphics, layout & text work together to help users find what they need.
Intuitive Design: Designing sites that users can figure out on their own.
Design Patterns: Pre-built solutions to common web design & UI problems that are proven to work look great.
Design Trends: Popular aesthetic styles that define how things look.

Main Takeaways:

————————————
Common design patterns —

page/layout based ways to design the things that users will commonly go to a website to click on. i.e. linking logo to homepage, example text in email input box, etc.

Common design trends —

Minimalist Design
Subtle Gradients
Large, bold type etc.

Beyond the course:

————————————

Personal resources for viewing and admiring UI:
https://dribbble.com
https://behance.net
https://onepagelove.com
https://awwwards.com
https://youtube.com
https://twitter.com — #uidesign tag

New but not new: A lifetime saga with code & dev.

Kathy Jean-Joseph — Fri, 18 Sep 2020 11:26:36 +0000

Well, first off, welcome to my new blog 🎉

I happen to be Kathy Jean-Joseph, which happens to be an extension of my thoughts and actions. My current motivation for creating this blog is to document my journey to pivoting to a tech career. Deciding to write my journey in several ways has caused me to really think about where I’ve been to get to this point and why I’m here.

What I realized is that it honestly was inevitable and kind of always a part of my life. Let me explain…

If I honestly look back over my life, I’m not sure how I figured that I would be anything else than on this path as a programmer/engineer/something in tech. In perspective, it’s always been a part of my life, but I made a conscious decision to go towards tech on July 10th. I finally put my money where my mouth is and paid for a boot camp with SkillCrush.

I had been dabbling with this decision since 2016, and to be honest, I might’ve just done it then if I could’ve afforded it, but I couldn’t at the time. This year was perfect because I finally could, and I honestly could see my paved path to the finish line. I knew my why and my drive. I understood my motivation, and after trying so many other things, I understood why so many of the things I learned would make me love my tech career an eensy-weensy bit more than what I currently do. I could literally take all my schooling and utilize it in one amalgamation of a job: UX design.

But if you asked me 12 years ago (to be exact) what I was going to do professionally, I really, for some reason though I was going to be an OB/GYN. I still have an acronym career, but I had the wrong letters.

As a millennial, before the term was used, in middle school was the rise of social. Surrounded by #bipoc, I had an eclectic range of personalities, social classes, and activities that I began to see the world through. At the time, my best friend, a Filipina, introduced me to the world of dev and design, unbeknownst to her. She showed me Photoshop and let me borrow her Photoshop 6 cd to install it on my computer.

From there, I was introduced to Xanga, a world where you could be whoever you typed to be. Xanga was a place where you created your platform with code and images. In 2005, at 13 years of age, I was already a front-end developer.

From Xanga, which was mainly attractive to a remnant of people who could afford the internet and really relished writing and blogging, came Myspace, which appealed to the masses and quickly. It’s no surprise that I started designing myspace pages and top 8s. Keeping up with both, I built relationships with like-minded people, and found unique corners of the web to learn new things and one of my favorite things, find new music. I found a snapshot via the Wayback Machine. — horsducommun.itsadoozy.com

One of my newfound corners of the web happened to be owned by a webmaster, Emily, who offered to host a free subdomain. I took the offer and built horsducommun.itsadoozy.com. Of course, it’s defunct now, but it was my first encounter with FTP and coding built from HTML, CSS, and self-hosted images.

I remember building a carnival-themed site, a coffee-themed site, and so many other things. Of course, I just didn’t know how to get people to my site to read it, nor did I worry about stats and analytics like I am today.

Looking at this screenshot of the past, I was aware of information architecture, pertinent information, and (horrible) typography.

In 2008/9, Tumblr was a place of honest connections. Similar to Reddit, you could find your vice and people who were about it. Mine was music and more intensely so in my high school years. I loved the uncovered, instant classics, and this was my corner of the internet to find it, share it, and be introduced to it.

I remember being introduced to DOOM, Blu & Exile, Janelle Monae, and Lianne La Havas for the first time. All while still coding my pages frequently with Tumblr themes. Still using CSS and HTML to get my point and vision across on my page of who I was and what I was interested in.

Design was still a subtle passion. I actually practiced vectoring and loved it. Vectored a few friends on there. Met lifelong friends on there. It’s still up if you want to scroll through — indignantlybred.tumblr.com.

This reminds me of something else I learned through Tumblr — naming conventions! I can say that Tumblr really began to solidify the need for consistency and branding. On Tumblr, you were found by your @name or subdomain name. If you wanted people to know you, you kept it the same and engaged OFTEN. It also began to solidify digital marketing techniques because, for the first time, at least for me, you could schedule content/blogs.

Listening to my parents and the real world around me, a career involving computers, no matter how much I liked them and to be on them, was not a job. I come from a Caribbean household where the focus was the Big 3: doctor, lawyer, or (traditional) engineer. They didn’t understand computers, programming, or how big it would be a few years later. I honestly think if they did, they would’ve encouraged me to move forward into a tech career, but that’s not what happened.

I started university as a chem major/Spanish minor. I ended off my 5-year stint as a Psych major/Spanish minor with my degree being held off a year simply because I had to take an exam that I couldn’t afford until later.

This was nothing like my formative years. I did continue to do design, and I found a mentor that nurtured my natural ability and formed design thought patterns in me that I still use today.

I was still way off, though. I wanted to be an ABA Therapist for autistic kids.

It was another acronym career, yet, still the wrong one.

After a year trying to get into a field that didn’t want me in it, or so I thought, I begin to take a more serious look into design and marketing. I finally decided to get my Masters in Digital Marketing and use my design talent to just make me more competitive. I decided I didn’t have to be perfect, just use it as a catapult in campaigns and projects to brainstorm with and for teams & aid in any pushes for the final product, whatever that may have been.

After graduating, I ended up freelancing for a while. After doing small jobs here and there, I purchased my domain and solidified my brand name. I pushed my self to do print jobs, social/web graphics and even learned how to manipulate WordPress and Shopify themes.

I made some good money, or so I thought, but I was limited to theme capabilities and couldn’t really create the full vision of a project as I wanted.

Now properly learning front-end development and programming languages, I’ll be able to really see a project vision through and not be limited to a theme. I’ll be able to create solutions and view the data that comes from efficacy in design. I’ll be able to think through user personas and use behavior and buyer psychology to design for more significant results in eCommerce.

And I’m excited. It’s been a long time coming.