During quarantine (in between all the stressful parts), I worked on rebuilding my website. What you see now is the product of months of work to teach myself web design, build my site on Webflow, and perfect every detail of my portfolio site. It was a lot of work: 29 separate pages in 4 different portfolio categories, and writing 12 separate case studies.
I encourage you to explore the site yourself, but I'll discuss my process, limitations, and goals for the future below.
As a designer, I've always had specific ideas about how I want to display my work. But as someone with very little coding experience, coding my own website wasn't an option. Yes, it's something I want to pursue, but I didn't want my first introduction to the world be riddled with errors and beginner mistakes.
Squarespace hosted my site for a few years, and it worked well enough. I was able to execute some cool ideas, like parallaxes, and could tweak the design to make it my own. However, I quickly saw the limitations, and lack of freedom to do specific things.
I wanted to build my own website, without coding. But I couldn't figure out how.
When the pandemic hit, I renewed my interest in my site. I also learned about Webflow, a web design app that gives maximum customizability without having to write the code yourself. Even better was that they offered a ton of free online videos to learn web design at Webflow University. I spent a solid week watching videos and taking notes, catching up on web design concepts I had learned a few years earlier.
As I was taking notes from Webflow University, I started planning out my website. I knew the general structure from my previous websites: Home, About, Contact, and Portfolio. The Portfolio had 4 categories: Design, Lasercutting, Public Art, and Illustration. Each of the first three categories were menus to multiple projects, so in total, I needed to build 29 separate pages.
I also thought about the general tone of my website, and what I wanted to communicate. I wanted clean, practical designs that let the work speak for itself, with clean, friendly, and sturdy typefaces. I settled with Roboto and Roboto Slab for titles, and Work Sans for my body text. I fell in love with Work Sans—probably that cute tail on the lowercase a.
As my planning progressed, I started sketching out specific pages. Some ideas were cool but would be really difficult for me, at this stage, to execute. I was worried about biting off more than I could chew, so I kept everything relatively simple.
As much planning as I had done, nothing really prepared me for what building a whole website really entailed. I am so thankful for Webflow, because otherwise this site would have taken 5 million years to build.
The asset manager was so helpful: I could upload a ton of photos at once, and organize them into folders. Placing images was so simple, and didn't involve having to type each image name.
Another helpful aspect is the symbols, which are basically locked elements that don't change. I don't think I used them to their full extent (kinda confusing, not going to lie), but they were great for repeated, unchanging aspects. On every page, I started by adding my symbols: the nav bar, and the footer.
The back and forward buttons were a journey of discovery—which means I struggled with them for 95% of the time, and then discovered the simple, easy way to do it after I made all of them. Of course. In the beginning, I tried to position each back/forward button manually, by setting absolute position with pixels. As I started exploring how to design for responsiveness, I saw that the concrete pixel measurements weren't functional. At the very end of my process, I discovered an easy solution: each button, positioned statically, inside a section that is justified by "space between." It pushes each button to the far edges, and it's that simple. I did scream a little when I saw how easy it was.
As I built more of my site, I realized that responsive design meant effectively building 5 designs for each of my 29 pages. Whew. Luckily, I used classes to make the process easier, and got used to the breakpoints quickly.
Webflow is great for responsive design, because the canvas for each page can toggle between wide, desktop, tablet, landscape mobile, and vertical mobile. It's easy to use, and the dimension bars allows seamless size transitions.
I do wish that Webflow allows you to add another, smaller breakpoint. The phones now days are getting so wide that I would prefer two separate breakpoints for mobile vertical. I had to have the layout work from 320 px all the way to 480 px, and sometimes it was difficult to make it work.
As I finished more pages, I needed to test each page on the live site. I was fortunate to have bought an iPad in the beginning of quarantine, so I could personally test my site on my laptop, my iPad, and my phone. I wanted a variety of devices, however, so I reached out to friends and family to test the site on their devices, and give me feedback on any broken parts.
I am very lucky to know so many talented people, and they helped me a lot by giving their feedback. If you helped, thank you!!
Overall, I needed to adjust vertical spacing on the vertical mobile designs, and make the text more legible across the board. I changed the light text to normal, and upped the size.
I finished building the necessary parts of my portfolio, and started thinking how I could communicate my personality through my site.
I created a section called "Joy In 10 Words," where I collected a bunch of things that brought my joy, and described them in 10 words or less. It was a fun exercise, and I think it shows who I am pretty well—food, gardening, sci-fi, puns, cute cartoons, and tv shows. I hosted everything in a slider, which was a prefabricated element available in Webflow.
Let me tell you—building that slider was the most frustrating part of building my site. Specifically, I wrestled with the slide nav for way, way too long. The problem is that the position can't be absolute, but if you set it to anything else, the normally horizontal line of dots becomes vertical, against the right side. Funnily enough, the prefabricated elements that were meant to be easy to use, ended up being the most difficult to use.
The combination of the slide nav difficulties and the lack of small mobile breakpoints made that intersection particularly difficult to deal with. I eventually made something work, but there is definite room for improvement. It's the same problem I ran into with Squarespace: not enough freedom to make specific changes in elements. It took me a lot longer to hit that wall with Webflow, compared to Squarespace, but it happened nonetheless. I guess my only option for true freedom is coding it myself from scratch.
I am really happy with my website. It's the most complete site that I've been able to build so far, and the most accurate, compared to what I planned in my head. My overall wireframes were pretty close to what I ended up building (minus the fancy ones), and it's possible I even exceeded my plan.
That being said, I certainly know there are significant areas to improve. The loading speed of my site is not great—I'd like to learn how to improve that aspect. My site is particularly heavy in images, so if I can decrease the loading speed, that would be ideal.
That slider is problematic too. I'd like to see if it would be easier to build a slider completely from scratch, rather than a premade element. Or, on the other hand, Webflow can increase the ease of use for that element. Whichever comes first.
Lastly, I realize that my use of a style guide was less than successful this time. I planned a lot of my main type classes out, but had problems with consistency throughout the process. I had to go through each page at the end of the build, and reapply consistent typography. It would be so much easier to just do it right the first time.
In future versions of my website, I'd like to build it completely from scratch—raw code. I'm not there yet, but I think building my site in Webflow really helped me understand the purpose of each element. Sections, containers, and divs make much more sense now, and I understand when to use each. I also have a better understanding of responsive design, and how to change a design across breakpoints.
I would also like to design for specific elements of my website, like a horizontal scroll view for my longer images and murals. I'd also like to build a viewer for my huge projects—Wired Weird/Famous Synesthetes, the Muir Book, and the Three Trips Poster. They're all such large files that I had to chop them into zoomed images. In the future, it would be cool to be able to have one zoomed area that you could drag to explore the huge image.
I don't have a ton of experience with web design, but I certainly have more now than when I started. I want to pursue web design more in depth, and learn all the best practices. The whole process just makes sense to me, and I could see myself arcing more toward web design and coding.
What do you think of my website? Have you encountered any bugs? Please let me know at my contact page. Thank you for reading all this, and I hope you enjoy the rest of my portfolio.
