The portfolio of Jonathan Patterson (jonathanpatterson.com)
6 years ago from TomTom Tom, Designer
6 years ago from TomTom Tom, Designer
This is a really great portfolio. It's a great example of being imaginative yet being pragmatic enough to be highly usable. His work is easy to find (and better yet — easy to navigate between) and unencumbered by creative licence of the site (often artistic expression tends to ruin good usability).
Awesome to hear. I worked pretty hard to strike a balance between creating a cool portfolio and letting the work itself shine. Thanks so much for the reassurance Andrew!
Well this is a nice surprise! I'm amped that my portfolio is getting so many compliments. Thanks you guys!
To shed some more light on things, I originally created the design a couple years ago. This is the 3rd iteration. Each time I improve on things... adjusting colors, refining font selections, making it responsive—and of course adding new projects when possible (most of my projects these days are under NDA so they're slow to make it to my portfolio.)
I'm enjoying reading all the comments about what you guys think. I've got plenty of ideas in store for the next iteration, although it might be a while before I can get to implementing them. I'm always interested in hearing what the design community thinks!
PS. Shout out to @TomTom Tom for posting my portfolio! PPS. Follow me on Twitter https://twitter.com/jon_patterson
No problem. Found it on Webflow Forum and I was like - this has to see the rest of the world. So I posted it here :)
Amazing show-case for WebFlow, was there any particular reason why you went down that road development wise?
Super impressed man, really engaging portfolio that I actually wanted to work my way through.
Thanks for the compliment Tim! I've experimented with so many ways to execute my portfolio of the years…1 time I tried to do it by hand with CSS/HTML. That was really hard. • Another time I hired someone to build a custom WordPress theme, that wasn’t bad, but didn’t let me customize enough of the overall site when I wanted to improve things.
I settled on a website builder that let me do it myself because I like the ability to change details over and over until I get it exactly the way I want it.
Made entirely in Webflow? If so, an incredible case study for the tool.
This is inspirational stuff, out of the box. The home page alone is a wonderful thing, but it's the little details that set it apart.
A designer who cares this much about the little interactions, animations and so-on, suggests a designer who would take care with your brand. Big love.
Gushing over this. Simple, clean, a fresh take, let's the content shine, and popping popcorn!
You noticed the popping popcorn! Yesss! I made that in after effects to add a bit more pizazz.
ohhhhhhh, i did NOT notice the popping popcorn before -- what a wonderful detail! :)
One thing I'd change is the copyright year in the footer! Here's a good resource: http://updateyourfooter.com/
Don't do this. That's not how it works.
Oh yeah? Please elaborate. I was thinking that would help me from updating this manually every year.
I mean, if you really want to include a year (I wouldn't), go with "©️ [Year first content was added]–[Current year]".
ex: ©️ 2014–2017
If you change what you have now to 2017, you're suggesting that none of the content was created earlier.
Of course, none of this matters at all because all of your content is copyrighted from the moment you created it whether you have that line in your footer or not.
Looks really cool, sort of a nightmare from an accessibility point of view, though. Failing color contrasts, missing alt tags, no focus states, etc...
Good observation on alt tags. I'm trying to get better about details like that.
Isn't 'accessibility nightmare' kinda super overdramatic though? I mean it's his personal portfolio site not healthcare.gov... Given the context I can't see these imperfections hindering any of his actual users one bit.
I remember seeing this over a year ago... still awesome.
Looks awesome! Added to my list https://github.com/iRaul/awesome-portfolios
really nice list!
Wow nice list - starred!
Adding your list to my list.
Really nice portfolio, although the readability on that orange is killing me
Really, really solid. I would LOVE a case study on how you built this in webflow -- I haven't used the tool yet but this is a huge testament to its power. Bravo, Jon!
Maybe I can do some type of demo video when I start working on the next iteration of of the site.
Great portfolio! Seamless navigation, perfect use of animations, great CTAs, and so engaging. Thanks for sharing. I'm borrowing some ideas for sure. Somebody mentioned your text, I would adjust character spacing, line height. and font sizes in XL displays. What did you use to create the moveable pieces?
Manolo, thanks man! I was obsessing over all those details so glad to hear they're being appreciated. I used Webflow to create the site but some of the other more nuanced movement within images themselves are created with After Effects, or a 3rd party script. For example, the typing text is a script that is added to Webflow to get that effect.
The colour in this is just brilliant, it's inspired me to consider more colourful designs when I create websites. Thanks for sharing
This is dope!
Ooooh, made in Webflow. Nice!
Fantastic portfolio. I love the colors and simplicity of it all. I think the portfolio page could have benefited from using ajax to load each portfolio page.
A somewhat unrelated question... how do sites get rid of the .html part of the url? Is it hard to do?
Thanks Jacob. As to your question about getting rid of the extension, I wish I knew. Someone chime in! 8)
Generally by using URL rewriting. If you're using an Apache server for instance, you'd be using the rewrite module (mod_rewrite) and a .htaccess file.
This goes over it pretty well: https://alexcican.com/post/how-to-remove-php-html-htm-extensions-with-htaccess/
Thanks for your help, i'll give it a read.
Good LAW that's nice work.
This made me smile :) love the playfulness and presentation. Its refreshing to say the least.
great work and a very creative and neat way to show. Congrats
You can def see the uniqueness and creativity in this site. Some of the text is hard to read but job well done on the design and execution.
Hey Alex, can you point out a couple examples? I'm always looking for stuff to fix!
I somewhat agree when I look at the 14/16px font sizes with the white text on a saturated background. Small thought. Killer portfolio regardless.
Sure. For example on the about page, the small light text in the philosophy, skills and apps boxes. On the portfolio, the nav at the top Pull Ups, Venier etc. Your answers on the Sup page, and the actual links on the contact page are hard to read.
I'm on a Retina display which could have an effect on the font rendering FYI.
Thanks for the detailed feedback Alex! I was thinking the text might be a bit too delicate but nobody had mentioned anything until now. I'm going to definitely address the typography more in the next iteration.
I can't see his work though..am I missing something?
did you click portfolio?
gotta say, that's a fantastic folio....
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Login to Comment
You'll need to log in before you can leave a comment.Login
New accounts can leave comments immediately, and gain full permissions after one week.Register now