All websites are not created equally
We all use websites that (hopefully) make our lives easier. Whether it is a google search, a food delivery, or e-commerce store purchase, websites certainly serve a clear purpose for the users. I thought I had heard of just about all the types of websites, but apparently I was wrong.
After my teacher Derek had put me through the paces of learning HTML and CSS through random goal-oriented projects that him or I thought of, one of the first official websites I made was a business card style website. We all know what business cards are, but what the heck is a business-card-style website?
Just the facts
A business card website is very much the digital version of its real-world counterpart: the paper business card. In the example above, the information could be broken down into a few parts.
Title (name of school + program)
Description
website URL
Call-to-action (CTA)
Research
The old Marco would have jumped straight into writing the HTML and CSS. But present-day Marco has over a year of design thinking and practice! So, keeping the data constraints in mind, I made a prototype in affinity. By the way, this prototype also doubled as a gateway for my Perpetual Education student projects too!
As you can see, the data is similar to the Perpetual education business card. I have my name, description (or interest in this case), a CTA (enter!), and a little SVG (that my teammates think looks like a martini or Pizza, haha).
For the visual design aspect of this project, I really wanted to evoke a poster-art feel. The SVG was certainly a nod to the Bauhaus, a famous German design movement. I really love the geometric nature of the movement, as well as the design and emphasis on sans-serif typography. So that is what I was seeking to evoke in my alphanet style card.
Having these types of clear design constraints helped me stay on track, and create a cohesive design. It also empowered me to write about my decision-making, so I could explain my decisions when asked.
The business card website
Now that I made the alphanet card, an awesome entry point to my business card website, I could focus on the main project… the business card website!
I actually had an advantage here, since over the past couple month (in my efforts to learn CSS) I made many different bauhaus-style iterations of my business-card website. So I chose one I really liked for the homepage, and for the other two pages (a sort of a experimental pages for my projects, and a writing page to highlight this blog), I chose to use the code from various other projects I made using HTML and CSS.
How I am feeling
At the end of the project, I feel proud of what I accomplished. But perhaps more importantly, I am proud of the support I have given to some of my teammates along the way! When they ask me questions, I got to reinforce previously learned skills, as well as learn new workflows and mental models.
If you are feeling overwhelmed by this project, I would encourage you to check in with Me, Derek, or your other teammates and ask for help. Remember, this could be fun if you let it!