Dates: June 2021-Present
Field: UX Design/Web Development
Client(s): Myself
Skill(s) Demonstrated: Adobe XD, HTML/CSS, Javascript, Skeleton (CSS framework), PHP, WordPress, blogging
Background
I was in dire need of a portfolio website (much like this one!) and I couldn’t find templates that felt like they expressed my personality. I had just finished a course on front-end web development, and I wanted to make a website that showcased my HTML/CSS/Javascript capabilities. I was also interested in exploring the UI/UX decisions that surround web development, so I decided to make a project out of it and document the process!
My Role
I coded the theme for this website every step of the way. I used a Udemy course to learn how to create WordPress templates, and from there I came up with a wireframe putting e-ink to “paper”, designed a prototype using Adobe XD, got recommendations and advice from friends/family on the UI/UX elements of the design, coded them in HTML and CSS, and restructured the code to use PHP templates instead of static HTML. Finally, I uploaded my new theme to WordPress, and you’re looking at it right now!
The Process
Before starting anything, I mapped out how I wanted the process to go, really letting my educator side shine. My thinking was, in order to learn how to do this properly, I probably wouldn’t learn very well if I just struggled through the process once and never looked at it again. So, I created a six-step process that would ensure that my learning would happen on a deeper level.
First, I would set up a local development environment, where I could mess around with the code as much as I wanted and see the changes immediately without having to put anything online for the world to see.
Next, I would create the plan for a website theme that would be intentionally ugly, but functional, to motivate me to do the process again (and better the second time).
Third, I would create a Git repository before coding anything, so that I could track changes (and potentially have other coders lend a hand).
Fourth, I would finally put the ugly website on the web, maing sure everything worked properly, and lletting the embarrassment propel me through the final two steps.
Fifth, I would design a website that I was more proud of, using UX and UI principles to make the design look clean and aesthetically pleasing.
Finally, I would commit those changes to Git, and put the new theme on the web.
You can see more about my plan in this blog post.
Step 1
In this step, I used Local by Flywheel to set up a local dev environment, and I got familiarized with the WordPress interface. Read more about this process in this blog post.
Step 2
In this step, I created a wireframe using my reMarkable (highly recommended product, by the way!) and cycled through a few designs that I thought would be appropriate, yet ugly. See how I did it here.
Step 3
In this next step, I realized that I had been following instructions for a project I didn’t know that I was doing, and I switched courses. I learned that part of being a web developer is understanding what I’m doing, and why I’m doing it. Hear more about this realization here. (I also succesfully Git committed in the process!)
Step 4
In step 4, I finally got my website on the web! It required a lot of templating and PHP. Take a look at how that works here.
Step 5 & 6
I was in the middle of finishing up a year in grad school, so these two steps were delayed quite a bit – but when they happened, they happened quickly. Read the conclusion to this series here!
Final Result
Step ∞ – As you might’ve noticed, the current design for my website is different from both the ugly and beautiful versions featured in my blog posts. That’s because I’m constantly changing and updating with new themes.
This particular theme is called “Colorful Ed-Tech”. It uses the Underscores framework to streamline some processes (such as making grids and buttons). Below, I’ve included a gallery on some past WordPress themes I’ve created.
If you want to give me some advice on how the website looks at the moment, please visit my about me page and drop me a comment!
