Site Design: Please critique my portfolio ☕ (twnsnd.co)
over 7 years ago from Cole Townsend, Designer at Robin Powered, does New Old Stock
over 7 years ago from Cole Townsend, Designer at Robin Powered, does New Old Stock
Never forget the favicon!
But seriously, why? Is it that important?
I believe that's one of the detail that people easily notice. Missing it will make you look less thoughtful since clients expect designer to be able to see all the details.
If you don't have time to do it, just do a simple color block. That's far better than the default paper favicon.
Not high on my priority list right now, but I'll make sure I have one in the end. Thanks for taking a look!
Here's an easy way to create all the fav icons you could ever need: http://www.favicomatic.com
wow thanks. didn't know this one, definitely going to add this to my toolbelt.
Nice, I really like this one: http://realfavicongenerator.net/
Another option is this one, I think its the best by far as it does App Icons for Android and IOS as well: http://makeappicon.com
Good point!
Overall - very clean, love the typography and like the animated gif on hover - was disappointed that the other CTA's didn't have the same treatment.
Couple of points that I think are low hanging fruit: image on the About page needs a height in the markup to prevent the page from jumping whilst loading. Sidebar-esque layout feels a tad outdated. But it works. The Works overview/landing page can do with some more teasing - give a visual clue like you do on the homepage? Not saying another bloody grid page with thumbnails, but surprise me (as a user, not me - don't listen to me, you don't owe me shit. What do I know?).
Spelling mistake in the URL behind the red asterisk anchor out to Thoughtbot. :)
3 - Anything with a sidebar follows a design affordance that was established during the blog(WP)-boom - in your particular case I feel it distracts from the main body (and core copy/message) you're trying to communicate. I would experiment with centering the main body (keep the width so you have some whitespace left and right) and then put the four snippets in your current sidebar either 4-abreast at the bottom of the copy or in a 2x2 grid if you need the space. Visually, it just allows the user to focus on the main body first. Just my .02
4 - See you've already spotted (and fixed) the missing "t". :)
Good luck! Nothing like the cobbler's shoes...
great site! (your side projects rock, btw)
i noticed two things that haven't been mentioned:
clicking on "hire me" leads to thoughtbot. "wait a second", the cient thinks, "I wanted to hire YOU. who's thoughtbot? who am I writing to now?" maybe have a little "hire me" site explaning the process? (i know it's in the homepage copy, but some might read over it or have forgotten it after looking at the other pages)
your about text gets very programming-heavy at the end. it's awesome that you learn new things but maybe it's a bit too specific (some potential clients might not know and care what framer is). and it somewhat waters down your focus. what do you do exactly?
I agree on the thoughtbot link. i was confused for a second why the hire me page looked completely different. took me a second to clue in.
I agreee with your second point as well. maybe OP could add a page talking about what he is currently learning, and keep the about page more "what i already know/who i am"?
Looks really neat overall! Not sure I like that you have to hover to see the actual project/work, but that could be a personal preference, not sure how others will feel about it.
One little inconsistency: Each project description starts with a verb, except for "Feeds at your fingertips".
After clicking around a little bit more, I noticed the "about" page was very well done. This page has much more eye-catching styles and certainly contains some important bits of info. Could it be linked to more prominently (I hardly noticed it)? Or could it be incorporated into the main page? It seems to serve many of the same purposes but in greater detail.
Does feel very well-done so far though, just think some things could be rethought :) Good luck!
One of my past versions had a similar type treatment with the bold header on the front page. I'll have to bring that back! Should I perhaps go so far as to make that section of the about page part of the home page?
Well said on the project copy. As far as the images go — my thought was to pull people in with copy and overcome the fact that not all my projects have similar looking images
"Not sure I like that you have to hover to see the actual project/work, but that could be a personal preference, not sure how others will feel about it."
+1
I don't think you need the * in the lead text, it's hard to click and fairly meaningless.
On the About page, the current status also feels a little pointless, is your portfolio not finished yet? Are you not working on any more interesting client or company projects you could link to status updates/dribbble/whatever for or a beta link perhaps?
Additionally, you definitely would benefit from running your site through pagespeed or running a grunt/gulp optimisation task over it. Your http://twnsnd.co/work/meta-landing-page comes in at 7+mb which is not acceptable but easy to optimise and fix at least and something that you should never release to production without doing or falling back on the "optimising is on my list of things to do".
Also, the Meta bit on your About page could link back to the projects.
Other than those minor bits, I like it, it's crisp and clear and I like the subtle loading animation on pages :)
Hi James! Thanks for all the awesome feedback and for looking.
I'll definitely look into something easier to work with on the home page in terms of linking. And yeah, my portfolio site isn't finished! I just wrapped up most of the Meteor code and I need to revise the design a lot!
The about page is my little personal space, so it's mostly devoid of actual work or work related stuff other than clients. Perhaps I'll remove those to make it even more clear.
Because this is meteor and there isn't really any optimization I can do, I'm working on porting it to Jekyll.
It is served now with meteor so it isn't blazing fast. Nor is meteor the best thing for this. I'm currently porting it to Jekyll using a yeoman generator, jekyllized@beta. The goal is to move it back to Jekyll and use reactJS for any front end dynamic needs (forms etc).
And you're definitely right, I should generate some internal project linking wherever I mention a project.
I think the asterisks* are cute! _^
Hey, you're the guy who made the Balzac theme, right? You had a great WordPress theme as well on Creativemarket, but now it's not available anymore?
Anyways, lots of people giving you feedback on the design, so I'm going focus on the writing. I have three points for you. Hopefully these will help you:
Your index page has this description:
"Cole Townsend is a designer who wants to work with you."
I think you could do a lot better here.
For example: you have visualized Tour de France! That should be on the front page, because it's something that people can understand quickly. Brutal truth is that people think about themselves when they visit your site and want to see how you can help them.
"He has a penchant for thoughful solutions."
Cole, have you said this to anyone in a real life conversation? Would this be a way for you to introduce yourself? Probably not. Not trying to shame you here – we all fall into the trap of using hard-to-understand language from time to time. This is very common. I would challenge you to think of an alternative for this. How do your friends introduce you to other people?
Example:
"Here's my friend Cole, he is a designer but not like most you've met. You have to see his work. His designs always show that he actually cares about the project and the people involved. He is very thoughtful. I'm always to see what kind of solutions he can come up with."
Not perfect, put a little more plain language.
Do you have or could you get some feedback from people you've worked with? That would be great to see on the landing page. It doesn't need to be cheesy or sales-y. A nice-looking single quote could be great.
I love the colors of the squares on the landing page.
I hope this helps and good luck to you Cole!
You should go retina for the pictures. It's a detail but it's important :)
For sure! Quite a bit of them are, I need to regenerate some stuff for the home page — the gifs I can't serve too large because they take up so much space. Likewise for some of the assets on the Meta page (like the video).
Thank you for looking!
The asterisk link on the homepage links to thoughbot, rather than thoughtbot. The CSSstats link at the end of the Meta page links to a dud website.
Why is the navigation split into two halves?
Other thoughts, but I've had too much wine to worry about typing right now. Whassup Sunday night
Ah thank you! Good catch there, that was driving me nuts.
I originally had a "proposal" link on the left hand side and yanked it. I'll put up a dummy for now that links to thoughtbot's proposal page.
I like the split Nav. But maybe "hire" and "about" should be together. and Work and Journal should be together because they are the same type of page?
I approve of your last name.
The "Hire Me" link goes to thoughtbot. Not sure if that's intended...kind of confusing. Maybe different wording? There's a difference in pronouns in your site (ex. Work with Us vs Hire Me)
Other than that, I think the layouts for the case studies are easy to read and get straight to the point.
Really dig the reversal of the standard hover behaviour for image/text overlaying. (showing the text and then the image on hover).
Wow realllllly feeling this! Nice work guy. Also that Drake reference in the console made me lol.
Bug fixes (enjoying it so far otherwise, just wanted to point these out):
Typo "apprencticing" in the main header text.
Image overlapping text strangely in the "Meta Landing Page" post.
very clean and minimal, I like it. But there are a few broken layouts (I assume)
Like the one here: http://imgur.com/ou9Fa2n
Overall, nicely done :)
Ahhh! Yikes, that is an ugly bug. Thanks man!
Mind telling me what/how/where you encountered that? (Device,Browser)
Edit: I hotpushed a change I thought was for mobile. Awkward photos ensued.
I just clicked on one of your posts and there it was. I was using Chrome on 15inch Macbook Pro.
Should be fixed now. Thanks Cong!
Looks great, nicely structured and clean!
I love the type and layout treatments of all your work. Want to move to San Diego? ;)
Hey Cole, I really like it, single column works for me, font sizes are nicely adjusted and the typeface itself looks really nice! One thing I have found is that on a blog post, if a line of code
is long enough, the whitespace effects the length of the page and you can scroll:
http://twnsnd.co/work/fresh-install-yosemite-easy
Maybe set your pre
boxes to overflow-x: scroll;
to stop that. I'd also like to see a bit more meat in your case studies. It's nice you've done a write up, but I feel you could go into greater length about the designs you've made etc.
Other than that, it looks slick and polished to me. Nice one!
I dig it. It would be nice if the header animation didn't reset when navigating back to the home screen (like it doesn't on the other views).
PS. Hello from just around the corner (Tremont St)!
The "hire me" call-to-action could probably use some additional contrast from the rest of the options. I'm not really sure why you've organized the IA this way, but it's a little muddy. Good work overall.
Journal page and work pages are sick. Really like the layout.
I would just edit the copy and some of the hovers on the main page. I would remove this "but don’t actually program that much", and that your a Buffalonian. Not that saying where your from is bad, but you can just say your from Buffalo instead of trying to be diff. Just my 2 cents.
I like it! I think i spotted a mistake on your thenews project. It says Client Panda. Overall I really dig it!
funfact: i live on townsend street haha.
Whoa. Glad I have a street!
I'll be sure to tweak that, thanks for looking.
Nice. Small fixes would be margins on
As well as styles for
blocks and to differentiate it from body copy.
Yikes, looks like I broke the markdown on that page so the code formatting is broken.
Call me crazy but maybe you shouldn't have Lorem Ipsum anywhere on your portfolio site. Did you build that app? i don't know. There was a bunch of nonsensical latin on the page.
I like your design sensibility though. Was a little confused.
Totally careless mistake on my part. I forgot to port over the rather short write up for that. Thank you for catching it!
What were you confused about? Or is that in regards to the lorem ipsum?
This early version of this design — I still need to heavily refactor all my actual code. I would love critiques on design, performance, code consistency, copy, anything that you come across. Bonus points if you say why you do/don't like something.
It is served now with meteor so it isn't blazing fast. Nor is meteor the best thing for this. I'm currently porting it to Jekyll using a yeoman generator, jekyllized@beta. The goal is to move it back to Jekyll and use reactJS for any front end dynamic needs (forms etc).
Designer News
Where the design community meets.
Designer News is a large, global community of people working or interested in design and technology.
Have feedback?
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now