It was Day 3 of our 4-day sprint to build a small business website for our clients at Perpetual Education( mobile-view ). I also had closing shifts at work the next two days which meant I could not dedicate as much time as the prior 2 days. The rush, pressure, and anxiety were not going anywhere so I had to find a way to balance it all, or else I would be letting everyone down. Today’s agenda was getting feedback on the mood board and prototypes I created and really try to “sell” my design to the client. Our mentor, Derek, reminded us that we need the client to believe our work. “They don’t necessarily need to understand it but we need to convince them it accomplishes their goals”.
I began Day 3 by reflecting on the mood board and prototypes I made by writing a quick Google Doc analysis of the situation and explained what decisions I made in order to accomplish the goal. I shared my analysis and prototypes with my classmates, mentor, and the client for feedback.
Throughout this project, we have been communicating with our clients thru Derek and our Business Advisor, Karen. Around 11 am I hopped on a Slack call with Derek to go over all the work I had presented thus far and find out what areas needed improvements.
One of the first areas that was lacking was the overall responsiveness and scalability of my prototypes. Prior to this website, I had no experience with media queries and breakpoints and it clearly showed. One instance was the way my main heading would break apart and go off the screen on mobile view. See trainwreck below.
Another area that looked unappealing to the human eye was when my website was on a tablet or similar screen size view, my description text would be too small and a bit difficult to read without zooming in. In this case, it would have been better to increase the font size at that break point.
I learned from Derek that the best way to build a responsive website was to start mobile-first. He explained it was better to begin the design and build process on a mobile screen and then slowly adjust and change the layout as the screen size increased to other devices such as tablets and desktops. He also recommended I look up the CSS clamp( ) function on MDN as he believed it would help with my scalability problem.
The client also believed it would be better to have more than just one page on the website. They mentioned that when you google local plant shops in the area, you can’t really find any so they wanted to showcase more of their business. They also thought it might be cool to have some real plant animations to go with the psychedelic aesthetics. This was my first real experience in dealing with client requests that were completely beyond my scope of knowledge. Media queries were one thing but I had no idea how to make real dancing cacti. Luckily, Derek is well experienced in dealing with client requests of all nature and he walked me through some steps I could take.
Step 1 was done on Affinity Designer. Sidenote (or in this case asidenote) I cannot begin to express how much I enjoy this illustrator and thankful we are using it in this mentorship. I have always wanted to learn how to make designs but never knew where to start. Because of Perpetual Education, I was giving a starting point and instructions on how to begin designing).
Step 2 was done on CodePen using HTML and CSS. I was given a brisk run-through of the keyframes, transform, and animation properties. I learned how to create the @keyframes CSS at-rule with a custom title and a from and to value in its code block. In those, I could put in the transform property and have values such as translate, scale, and rotate. The end result was fun dancing cacti!
At the end of our near two-hour call, Derek reminded me about the most important part of this website. It was not the fancy animation or psychedelic aesthetics, but the goal and objective the website aimed for. In the end, all that mattered was the question of “was I able to accomplish the goals of the business on this website” and if I could answer it with “yes I was because…”, only then can I feel and say my website was successful.
I had so much to think about as we ended our call and as I got ready for work. I spent my entire shift thinking about our meeting and pondered ways I could successfully make those changes and complete the primary goal of my clients.
Well, that’s all for today’s episode, kids. Will Alex be able to make the right changes and be successful in accomplishing the client’s goals or will he finally meet his doom? Stay tuned for the next episode of “Working With My First Client”! Same bat time, same bat channel.