In this course, we’re going to build a full UX designer’s portfolio — but the principles of design and development we’re covering can apply to portfolios and projects of all types — and we’ll be using the same exact CSS properties used by Apple and Stripe and Awwwards — almost every development leader throughout the industry.
Now whether you’re advanced or you’re just getting started in web design and development, we’re here to give you the guidance and the confidence...
[Sara] I changed it again because Playfair is very 2016...
[McGuire] We’re filming.
[Sara] Yeah yeah yeah — keep going. I have my coffee.
[McGuire] Is that a Pumpkin…?
[Sara] Pumpkin Spice Latte? No. That’s not even a Swedish thing.
[McGuire] Throughout this course, we’ll be referencing Sara’s portfolio design in Figma, and we’ll build it as a production-ready site (a CMS-driven portfolio)...right in Webflow.
Now. We designed this course to be taken over 21 days (one main lesson every day). And we did this not only to absorb the information at a pace we find works really well for designers, but to work on a lot of this yourself — to build and iterate on your portfolio design throughout the course. At center of that, Grimur’s also going to be here with what he’s calling a 21-day challenge. Grimur?
[McGuire] Do you want to let us know about…
[Grímur] Thanks, McGuire. The 21-day challenge is exactly that. As you go through the course and design or update your own portfolio, I’m going to use my significant influence to share some of our favorite work on Webflow’s social channels, so, just wait. I have some stuff planned.
[McGuire] We’ll come back to Grimur after each major lesson. Now Figma’s where Sara has started to design an example portfolio for a fictional UX Designer named Megan...who’s an amalgam.
[McGuire] It’s...it’s a word.
[Sara] Just don’t say it again.
[Grímur] Yeah, I’m on Murrial Webster.
[McGuire] (that’s not it.)
[Grímur] Aaand “e-melgum” is not a word.
[McGuire] Megan’s portfolio is based on several extremely effective design portfolios we've created and learned from through the years. And we’ll cover every step of the process. This means we’ll cover the homepage, project pages for each client or each rebuild that’s being featured, a contact page — and we’ll take it even further by building out 2D and 3D interactions, Google Analytics, open graph and SEO settings, and everything else needed to ensure we’ve checked and reviewed our portfolio before we publish it to the web.
The objective here is to create a clean, direct representation of Megan’s work — so potential employers or clients can quickly make a decision about reaching out to Megan for UX design services. And we’re doing this over 21 parts — 3 weeks if you’re doing this one lesson a day, or of course, you can take this at your own pace.
But we’ll break things down from the very beginning, so if this is your first design and development project in Webflow, we’ll give you all the tools you need to be successful. If you’re already familiar with advanced web design and development, a lot of this stuff will feel right at home.
Now. There’s something different about this course (something different from every other course in the world). If you look at this newspaper, you’ll see it’s dated December 21st.
[McGuire] That’s right, Sara. To those in this studio, this is today’s paper. But to anyone watching this before December 21st, 2021, this course...is from the future. The future. Is incredible.
[Sara] So incredible.
[McGuire] Especially with the Apple (product launch)
[Sara] Apple launch. So expensive. Space gray.
[McGuire] Unbelievably shiny, and in Space gray.
But here’s the thing. We took everything we learned from the future, brought it back to the start of the year, and presented it...in this course. Is that illegal?
Remember: we almost always release lessons earlier on Webflow University, so check there for the most up-to-date parts of this course, if you’re not doing that.
But whether you’re following along from the past, present, or future, we’re really excited to cover each and every aspect...of this design portfolio...for a completely fictional person.