Google UX Course: Wireframing Google logo

I recently hit a milestone with wireframing. With the foundational terminology and frameworks established, it was time to bring things to life visually. I find wireframing to be the second most enjoyable part of the UX process, just after coding a functional app. After completing the initial research and interviews, I was excited to dive into the hands-on design work.

During this phase, I applied several Gestalt principles, such as similarity, proximity, and common region. These principles, which I had previously used intuitively, now made sense with the proper terminology. For instance, similarity helps users group related items, proximity ensures related elements are perceived as connected, and common region visually distinguishes sections. These principles are fundamental not only in UX design but also in architecture, web design, and graphic design. Understanding them enhances how we organize and present information, improving overall user experience.

With these principles in mind, I started creating wireframes. I began with hand-drawn sketches, though my left-handed smudges were a bit of a challenge! To refine my designs, I traced an overlay in Illustrator. My familiarity with Adobe software facilitated a smooth transition to Figma, where I developed my low-fidelity prototype. ✅

I am continuously updating my portfolio as the course progresses.

GIF of my portfolio with my wireframe work so far

Google UX Course: Foundations Google logo

As technology becomes increasingly woven into our lives, I wanted to delve into the intersection of technology and psychology, so I enrolled in Google’s UX Design course. With a background in design and studies in psychology, I was familiar with some UX fundamentals, but there was still much to learn. For my portfolio project, I chose the prompt: "Design a responsive eCommerce app that enables gamers to purchase gaming equipment."

After grasping the foundational principles and focusing on empathetic design rather than a one-size-fits-all approach, the next step was to create personas. Having some experience with persona creation from my work in fashion and product development, this task felt intuitive. The next challenge was conducting a research participant study. While I’ve done similar work before, this time I decided to forego real interviews in favor of a mock portfolio project, using AI prompts to test my approach further.

Illustration comparing equality and equity: Equality shows three people on identical boxes behind a fence, only the tallest can see over. Equity shows the same people with different box heights so all can see over the fence.

By using role-prompting with ChatGPT, I fed each user persona and interview questions, receiving surprisingly detailed responses that were invaluable for shaping my project. Although AI can't fully replace real-life user interviews, it proved to be a useful tool for my mock project and initial UX portfolio. While I’m just at the beginning of this journey, I’m excited to see how all this will contribute to my final prototype.

GIF of role-prompting used for portfolio along with Google course map.

JS Checked JS logo

JS was next on my to-do list, but for the past few months I've been dancing around it like a drunk teen at a bonfire. I even tried to distract myself by diving into Python, which is known for being easier and more straightforward - and it is - but a goal is a goal, so I refocused back to JS.

In the past, I tried to cheat myself by using AI to complete my JS for me. But as I've mentioned earlier, prompting in AI is a mirror reflecting your knowledge. If you're lost and clueless, your AI prompt will show your 🤬. And oh boy, it was showing mine!

Long story short, SuperSimpleDev Simon got me through it. I climb over that daunting hill of blurred "WTF" code and gain an understanding of JavaScript's contextual language structure. Check out my skills

I may not have the entire puzzle figured out, but I've grasped the concept of corners and connecting pieces that will ultimately lead to completing any JS the puzzle.

I still work with AI, and it's a valuable tool. Instead now, I can confidently call bullshit when AI plays AI mind tricks.

I will be completing other tutorials and courses, but getting past that initial hurdle with JavaScript has been a major win!


SuperSimpleDev DOM Projects JS
Class of 2023🎓

My baby brother is graduating,🎉
Graduation = party
So I created his very own site.

Graduation Party Invite Site

A potluck sign-up webpage, putting my PHP, JS, and Flexbox skills to the test!

In a 2 week project window, I created a responsive sign-up form that emailed me the attendees' names and selected items. To avoid any duplication of dishes, I wrote a script that would store and disable checkbox selections as guests submitted their selections. Unfortunately, at test launch, I discovered I had stored the data locally instead of in a database for all site visitors. Oops!

So, I turned to my SQL skills and spent the next 24 hours trying to set up a database and a server-side program in PHP. Let me tell you, it was a challenge even with the guidance of GPT (which I wanted to physically fight at one point). Separately I was able to write the SQL and PHP scripting, but scripting a communication between the two was lost on me. I got as far as the "require_once" function, but the script failed to come to life.

This experience emphasized the importance of exposing AI to various subject-level experts, from novices to seasoned professionals, to maximize its potential. Ultimately, the success of AI is in the hands of its end-users' guidance, classic like nature vs. nurture.

In the end, due to time constraints, I had to manually update the checkboxes with a JS variable as I received each response, which was not ideal but worked for our small gathering of people.

However, this approach taught me valuable debugging skills. Like when the JS script stopped updating the checkboxes due to a spelling inconsistency between the label and input id tag for a side dish checkbox.
Coding Spelling Errors

I also learned about cache busting, a technique used to force the browser to load the latest webpage version, when I noticed my browser kept loading outdated versions.

Overall, I'm proud of what I accomplished and how far it has taken me in less than one year. As a developer, I'm always learning and growing. This experience pushed me beyond my limits and closer to the next step.

AI and EDU

Artificial Intelligence (AI) is a game-changer in higher education, sparking debates about its impact. While some argue that AI undermines the learning experience, others see it as an invaluable tool that can help struggling students. I firmly advocate for AI in education and believe that we should embrace its potential streamline productivity.


Consider my husband's experience, a computer science major who received a zero in his nutrition class due to suspicions of using an AI writing model for his summary. Despite having a solid understanding of the course material (a 95% in the class) and passing every quiz, exam, and time-wasting Jeopardy game, he was penalized for using AI to assist in writing his short answer. It begs the question: why should educational institutions punish students for utilizing smart and effective tools? Rather than fear AI, we should embrace it as a learning aid. Approved AI-powered tools such as Grammarly and EasyBib has helped students improve their writing and citation skills, facilitating academic success which is not considered cheating.


Of course, there is a time and place for AI in education. Using AI in grade school and high school may take away a student's ability to learn, overcome, and achieve. Recalling, my first 6-page persuasive essay in high school. Although a decent writer, I hated every moment of trying to put words and citations together, yet in the end, I was proud that I wrote something of academic quality. It's essential to learn the basics before finding shortcuts. However, AI can be a valuable asset in higher education, where students are expected to produce high-quality work quickly.


The solution is to understand how AI writing models are used. There's a big difference between “AI, write a short answer to this question…” and “AI, rewrite this short answer for this question in a persuasive, upbeat tone using..." To maximize the potential of AI in education, we need to teach students how to prompt AI with literary tones, styles, devices, and techniques. Rather than replacing human creativity and expression, AI can serve as a powerful tool to augment and refine these skills. Allow students to submit a rough draft and an AI draft with prompts for final review. Face it, students will continue to use AI - so we can either turn it into a “Shadow Market” and spend hours looking for traces of AI - that will get harder to detect - or embrace it in the classrooms for the good it can do.


For example, this post is AI assisted. I utilized my key points to prompt ChatGPT to expand my thoughts to create a blog post. Afterward, I used Grammarly to check for grammar mistakes and added some final touches. The different versions, including the initial draft, the AI rendition, the Grammarly version, and this final product, originated from my own ideas. However, using AI models such as ChatGPT significantly sped up the process from generating ideas to producing and finalizing a draft. All this time saved, I can get some sleep and actually study for the 4 exams coming up.


AI Prompted Writting

AI in higher education is not something to be feared or witch-hunted, but utilized as a tool to refine and augment students' skills. This way we can achieve the best of both worlds: technological innovation and academic excellence.



Update: He appealed and has been enrolled in an Academic Integrity course which will allow him to resubmit the short answer in question.

We have AI Hand
AI Hands1 AI Hands2

If you've spent enough time tinkering with AI image generation models, you've probably noticed the awkward, downright bizarre hand placements in human images. Why? Well, like any deep-rooted issue, it links back to the parent/creator and our own struggles with understanding hands.


Take a close look at some of your own group picture and you'll notice the wild range of hand placements - there was no consistency. Our hands have a mind of their own -
WE have AI hands! Let's face it, hands can be a confusing multi-fingered appendage. Sure, we know the basic function of hands - they help us manipulate objects, communicate, and interact with the world around us. Yet when it comes to the nuances of hand placement, we're often at a loss.


Where do we put our hands when we're speaking? When should we hold someone's hands? What about when we're dancing? Do we put our hands on our partner's waist or hold them out in front of us like a robot? Even when standing or walking, we want to know where to put our hands. Do we cross them in front of us, hold them behind our backs, or let them swing freely at our sides? The truth is we humans have never really figured it out ourselves. Some cultural and social norms dictate specific hand placements in certain situations. Still, even these can vary widely depending on the context. And let's not forget about the awkwardness of posing for photos - where do we put our hands then? Do we put them on our hips or fold them in front of us?


Normal AI Hands

Given our own struggles with understanding hands, it's no wonder that AI image generation models have a tough time with them too. These models are trained on large datasets of images, but if the images themselves are inconsistent regarding hand placement, the AI will have difficulty learning what “correct” hand placement looks like. So, what can be done to address this issue? One potential solution is to focus more on hand placement in the training of AI image generation models. AI models can better learn how to generate more accurate and diverse hand placements in their output images by including a more comprehensive range of hand placements in the training dataset. We can also provide more specific prompts like “...holding up a hand peace sign” to reduce the likelihood of strange and unpredictable hand placements in the output images.



Three finger peace sign AI image

Of course, there are other factors at play as well. Hands are incredibly complex structures, with multiple joints and a wide range of motion. Getting every joint and finger in the correct position in an image is no easy feat. So we can't fault AI when humans have been struggling with this for a long time. Maybe one day we'll figure it out but until then, peace…✌🏿🙃

Hello ChatGPT

While working on my e-commerce website that sparked my passion for coding, as I was developing the catalog page, I encountered my first major roadblock - the footer wouldn't grow as I added more content to the page. A month-long, discouraging slump left me feeling frustrated and unsure of my skills. After scouring various forums and articles with no solution, I discovered ChatGPT. This was my first experience with AI, and it tested my ability to prompt AI to help it help me.

My first prompt was like any Google search "HTML code to keep the footer at the bottom of the page," vauge in hopes of a wide range of results to choose from
ai-html-css-gpt-prompt

GPT suggested a Flexbox container code. Since I had not dabbled in Flexbox before, I asked for an alternative method, and GPT delivered with a class attribute.

Thus began my rabbit hole dive with ChatGPT - from troubleshooting the footer not adjusting to the page height to making the footing a child element of the main content, even providing my HTML and CSS code for AI review. I got my first experience with debugging, AI prompting, and troubleshooting. After ten prompts and another week of feeling like an imposter, I finally got it.

I felt like Dr. Frankenstein IT'S ALIVE!!
ai-prompt-result

The feeling of failure always feels new, no matter how many times we experience it. But the same is said for success. That exhilarating feeling of accomplishment, that rush of knowing we've overcome a challenge, always feels new and inspiring, no matter how many times we experience it.

Cheers to many more projects together, ChatGPT. 🥂

The Lil Puff Puff Shop

Hmmmm Puff Puffs. 😋

If you don't know, you need to know. A website to pay homage to my favorite fried snack or dessert, depending on how sweet your tooth is.

Not a bad idea for a "hole in a wall" restaurant. 🤔

The First of Many

I am just going to brag that I have completed my HTML course and created my first website. Having this accomplishment under my belt feels inspiring, and I'm eager to keep learning more. 🎊

As I worked through the course, I found everything seemed familiar from when I first dabbled in HTML two years ago. It was like riding a bike - once I got going, everything started coming back to me. Now that I've completed the HTML course, I'm ready to move on to CSS and see what else I can create.

In the meantime, I've discovered Mimo, a fun way to keep up with all this new knowledge, providing a fun and interactive way to learn and refresh coding skills.


First Webpage Gif
<hl>Hello World! </h1> 🧀

I illustrated an e-commerce site that I'm itching to bring to life; the only problem is, it will cost over $10,000 (on the low end) to hire someone to code it for me. I have better ways to spend that kind of cash 💲 💵

Instead, I'll code the site myself.

Easier said than done, right? But hey, what's $10K to a 4-hour HTML tutorial? Okay, okay, so it will take longer than 4 hours, but you get my drift. As a beginner, I know I have much to learn, but I'm up for the challenge. After all, what's $10K to a little DIY spirit?

Until next time, happy coding!


freeCodeCamp VS Code Tutorial freeCodeCamp HTML Tutorial Hello World Code