I don’t know about anyone here but for me, its very hard to tell when a website i’ve been working on is truly ready for launch. At the last second i think of new things to add and this isn’t good because ill just never finish it. My goal with this website is to be more of a resume for a potential employer when i go to a interview looking for a job or something. I just want feedback on what i can improve so i can be done with it knowing that what you guys mention is all i need to do. I’m concerned about how the animation performs on other computers. On mine its smooth but on the portfolio page it gets choppy. So i want to know how smooth the animation is and any other info would help.
I really like it a lot. You have clearly thought out your UI and your design/color scheme is awesome. I’m really feeling it.
The ONLY thing I think people will critique is the use of the hamburger menu which there has been a recent crusade against. But… whatever. I think it’s a legitimate way to navigate a smaller website like this. And, it’s ubiquitous. Just when people are getting used to it… now everyone wants to do away with it. I get it, out of sight, out of mind but on a portfolio site, sometimes it’s about THE WAY you showcase info.
Anyway, great job. Appears to be fully responsive. Graphics are clean. Typefaces are clean. jQuery works like it’s supposed to… etc.
I’d maybe suggest ONE additional thing… you might want to look into GSAP for your animations. It’s 20 times faster than jQuery, putting it easily on par with pure CSS for most things. @chriscoyier did a nice write up about it here:
If you already know jQuery… you can learn how GSAP works in 1 day and get your animations converted. Just a thought… by no means a requirement.
@Joe Thank you for the feedback. I’m using Velocity but i still experience choppy animation Even for these which are very simple. Ill replace velocity with GASP post the result. I really don’t know what other icon to use besides the hamburger one.
@shaneism Thanks for the feedback. I was thinking of showing the menu when hovering over the button instead. Maybe ill see how that looks.
I like the overall look and aesthetic. My gripe is with Shane’s – the menu. It seems like the website is built for designers instead of potential customers. We immediately ‘get’ where the menu is based on the visual cue of the 3 stripes. Might turn a potential client off though if they can’t find what to do next.
Well @elkrocke, I think what they are trying to say is that you should do away with the hamburger menu altogether. I tend to agree in theory. I’m sensitive to the fact that sometimes changing the slightest thing can throw off a designer’s vision for how the site looks and feels. What you might do is go live with it and then get rid of the hamburger menu later as an enhancement. If you use Git, this shouldn’t be too much of a burden.
After all, I seriously think that is the only thing that is lacking here. Therefore, I say it’s ready to launch with the plan that you’ll ultimately phase the menu in its current state out.
It’s not just the “hamburger” menu icon per se that’s my issue, it’s the click to show content and that content happens to be navigation that’s my personal issue. Especially when you have plenty of room to show the links, it’s just not good UX.
Like Joe, I’m also sensitive to your vision, but it seems like you’re getting stuck on it. Try stepping back from it and looking from a different perspective: someone that is trying to find something on your page and navigate through multiple pages during their visit.
Great work! It’s cool to see that you are experimenting with a bunch of different animations/transitions on the site. I would just try to make sure that the style of interactions across the entire site are cohesive and build off of each other. I was a fan of the transitions of the center element in the header, but not so much the loader when I landed on the page. There were a lot of animations going on at once (personal opinion). In addition, those circles on an animated gif look fairly pixelated on my monitor (not retina). If you have to use a loader, I prefer full page loaders like this (also opinion). If you wanted to keep it, I bet you could figure out how to reproduce it with just css and not have to worry about the pixelation.
I agree with the peeps above about the navigation. I’m not as adamant about the hamburger part, but more the extra clicking portion. I know that some trendy sites, nowadays will just go with a pure hamburger nav. While I don’t think it’s a good idea for UX, it doesn’t bother me too much to make an extra click on most sites (maybe because I’m also a designer/dev that uses the web all of the time). The nail in the coffin on this site is the content on the homepage. There isn’t any content on the homepage that could lead me to another place on the site, so I’m forced to click twice to find out anything more about you. I know it looks clean and feels nice to have the minimilist homepage, but people are lazy and may not even make it past the first page. It’s always a fight to figure out how to draw them in. One idea could be to use ‘background-size: cover;’ on the top section and an arrow below your intro text to anchor link them down to some featured portfolio items (just a shot in the dark). I still agree that you should pull the navigation out from behind the hamburger (at least for larger screens).
I really like the fact that many sites are trying to feel more like apps now a days and are using things like AJAX so that you don’t have to experience latency and page reloads (ex: http://www.bigspaceship.com/). The (speed) responsiveness of the site feels great after the initial load. I expected to see that you were loading pages with AJAX, but was surprised to see that all of the pages were being loaded at once. Although it is a different approach, I think this will work just fine with search engine indexing because in essence, it is like a one-pager. The one huge recommendation that I have is to use the HTML5 History API to keep track of the users browsing history. I was thrown-off when I couldn’t use my browsers back button. For History API graceful degradation, consider using History.js.
Concatenation… JS and CSS. I see quite a few http requests in there.
If you have extra time, it would be really nice to show future clients/employers how awesome of a job you did on each of those projects with more content and images for each of them. The Hallo Sans may be a little tough on the eye with more content though. I apologize if all of the suggestions made the post sound negative. The reality is that it is really a creative and beautiful site, and you’re doing great work!
I guess this is something i wont be doing again.
I wouldn’t just make the conclusion to no longer do something. Just consider the context. The greatest idea in the world totally sucks in the wrong application. The #1 thing I try to consider, and also fail at, is the usability part. The best designs, ideas and concepts take a back seat to how easy and intuitive it is to use. Sometimes you make a decision and it ends up just being difficult, so you’ve got to back up and rethink how to get it to work for the the majority of users.
@Josh is totally right about that. As far as navigation goes, check out this site. Completely different navigation than I’ve seen anywhere else. They are more interested in innovating than following the rules. Maybe it works, maybe it doesn’t, but they have potential clients to impress, so why not. They have put some thought into it and hopefully tested and validated it before they rolled it out. But, knowing your audience, testing, and validating are all important in the UX world (you’re doing the right thing by asking for opinions).
ditto the menu. personally, I would make the sidebar always visible and only make the hamburger nav-link visible on more narrow screens where the nav would then take-up screen space.
For me, on a larger screen-size, the percent-width content felt like it was in my face too much. I would have a max-width of about 1300px on .content-container
@seansean11 that ROKKAN navigation looks like it’s optimized for phone.. I may steal that idea, though for phone-only. Thanks
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".