|
I wasn't expecting anyone would spend the time to wade through the jumbled mess of HTML and CSS I have there! Its pretty much the result of a combination of my inexperience, changing my design a bunch of times, experimenting with new ideas as I think of them, big gaps between working on it, and not having spent any time cleaning up. I expect I'll have to re-write everything from scratch to fix it, but I figured it would be best to get the visual aspects of the design figured out first. I'll work on implementing those suggestions next time I'm at work.
|
#
?
Mar 19, 2014 10:42
|
|
|
|
| # ? Apr 30, 2024 01:31 |
|
|
You mentioned the paragraph text maybe being too dense, I think I'd agree, but less because of the line height and more because of how long they are. Some of your sentences are 17-18 words long, that's a bit much for paragraph text; aim for 10-12 at the most. If you plan on having images to break up the flow of the paragraphs that could help too. While I'm here, if anyone would trouble themselves to take a look at my portfolio website I'd be grateful. Any critique, no matter how minor, would be great. I sort of rushed it because I'm attending a career fair tomorrow which is a week earlier than I originally planned, but for having knocked it out in two days I'm decently happy with how it turned out. http://www.jereddanielson.com
|
|
#
?
Mar 19, 2014 11:21
|
|
|
Anony Mouse posted:You mentioned the paragraph text maybe being too dense, I think I'd agree, but less because of the line height and more because of how long they are. Some of your sentences are 17-18 words long, that's a bit much for paragraph text; aim for 10-12 at the most. If you plan on having images to break up the flow of the paragraphs that could help too. Minor and rushed critique incoming! • In your navigation, make the entire tab clickable, not just the word. • Don't indent text on the web. Space paragraphs out with margins instead. • Don't embed your resume in an <object> tag. In fact, don't embed it. Put it in HTML in addition to including a PDF download link. • Give everything a bit more space, specifically vertically. Feels claustrophobic. Your header is way too close to your content, as is your footer. Add vertical padding within your footer too. • Give your typography some consistency. Your body copy on your About page is a different size than on portfolio pages. I might adopt your caption style everywhere, as it feels the nicest. The white text feels a little awkward and jarring. • Check things @ mobile dimensions – you have a lot of stuff not lining up or running off the page (example: http://imgur.com/oNdQC45). You should have consistent gutters on either side of the page. kedo fucked around with this message at 14:54 on Mar 19, 2014 |
|
#
?
Mar 19, 2014 14:50
|
|
|
OtherworldlyInvader posted:I wasn't expecting anyone would spend the time to wade through the jumbled mess of HTML and CSS I have there! Its pretty much the result of a combination of my inexperience, changing my design a bunch of times, experimenting with new ideas as I think of them, big gaps between working on it, and not having spent any time cleaning up. I expect I'll have to re-write everything from scratch to fix it, but I figured it would be best to get the visual aspects of the design figured out first. I'll work on implementing those suggestions next time I'm at work. Here's Skiant's markup with just a few CSS rules. I'm by no means saying your page should look like this, but you should always start with minimal markup like his, and then the barest minimum of styling to make things usable. This page is from a UI perspective, "complete". Navigation looks like navigation and tells them where they are without being distracting, the header is visually distinct from the content, and the text is legible and easy to read. Your graphic design should complement a base like this, rather than "pretty first", especially when you are just getting started.
|
|
#
?
Mar 19, 2014 18:17
|
|
|
kedo posted:Minor and rushed critique incoming! All good advice, thanks.
|
|
#
?
Mar 19, 2014 19:37
|
|
|
Been working on this off and on. I could use some fresh eyeballs and whatnot. http://www.designapparat.us
|
|
#
?
Mar 21, 2014 22:54
|
|
|
Black Is Black posted:Been working on this off and on. I could use some fresh eyeballs and whatnot. http://www.designapparat.us Random thoughts: - The mark in your logo is indecipherable at that size - I don't understand what the tweets section contributes. Seems like it just adds clutter. - If you scroll all the way down you see a continuation of the blueprints background. I find it distracting. I'd look for another solution for a footer. - You have no obvious contact info. See the next comment... - I understand that the message box goes to you, but the copy in the box makes it seem like you want me to lay out my entire problem up front. I personally find it imposing. - I wouldn't mind seeing your work featured more prominently. I think that's where you're going to sell your services. - I think you need to spend a lot of time working on the copy on the Work page. Specifically lay out what the challenge was and what you did to solve it. Show potential clients that you know your stuff. (This isn't web design per se, but I think this is by far the weakest part of the site) - Don't keep a blog page unless the content on it is going to directly contribute to selling your service. Usually design firms that keep blogs use them to promote the idea that they maintain a certain culture (fun/friendly/creative/driven/etc) that will appeal to the target demographic. - Not a fan of the font for the projects on the Work page. The kerning is completely hosed. Ka p ita ll edit - I think the logo is a robotic arm? I almost went blind trying to figure it out.
|
|
#
?
Mar 22, 2014 01:53
|
|
|
Black Is Black posted:Been working on this off and on. I could use some fresh eyeballs and whatnot. http://www.designapparat.us As above. +. - There's not actually any real information on the front page. - The background competes with the foreground. - The sliver of background below the tweets/message box provides an expectation that the page should continue to scroll downward - the page has no grounding. - The h1 at that size is too heavy a face for light on dark, and hence vibrates somewhat. - The message seems friendly, but the typeface and all caps say otherwise. - The 'work' sections flow into one another, there's no real visual differentiation. - The work isn't easy to scan. Each image is big, but I can't see the description (for context) when I'm looking at the piece, I have to scroll, which is a minor annoyance. - I assume you're either switching to or switching out Nexa Book? It's only on the navigation at the minute. - And Avenir is beautiful font when used well. But you can't switch to optical kerning on the web, and simply dropping the tracking, although it will help for the titles, won't fix everything. Use something built for web use.
|
|
#
?
Mar 22, 2014 20:36
|
|
|
Great feedback, thanks.
|
|
#
?
Mar 22, 2014 20:48
|
|
|
Additionally, on your home page, you have 3 text sections below User Experienc, Information Architecture, and Design. Left align the text in those paragraphs, they'll be easier to read. You can probably leave the title centered if it looks okay. I agree that the contact form isn't good enough - put a simple contact section up with an email address, and your twitter handle. Duplicate them in a footer, too. Really like what you've done so far, it's pretty well balanced. A question for you (and maybe other designers in this thread, too) - how do you evaluate webfonts in your designs before purchasing them? I feel like it'd be a bit of a crapshoot, and I really like to see the typeface in context before I buy.
|
|
#
?
Mar 24, 2014 16:05
|
|
|
Design in the browser and use Typekit, but it is definitely a bit of a crapshoot when I need to switch across to Illustrator/Indesign/PS. CC would completely remove this problem, but my work can't justify the cost vs. the deal they've currently got for CS6, so having a big library of fonts so there's something to hand that's as close as possible looks wise (or just weight and ratio at a pinch) has worked ok, ish.
|
|
#
?
Mar 26, 2014 23:02
|
|
|
Its been a while, but I've updated my site again based off the feedback from here. 1. I've re-written the markup based off the structure Skiant posted, with a few deviations. I ran into some sort of issue (which I think involves specificity) with the class tags on <nav> and <li> which I haven't figured out yet. But I'd like to get feedback over the weekend so I have them all on <a> for now (just noticed I missed one  ). I also used <section> instead of a <div>, since as near as I can tell from the vague definition that's the semantic tag most appropriate for the content I have in it.2. I've waffled back and forth between keeping the background texture and going with a solid dark grey background. I'm not really very happy with either, but haven't been able to come up with something I like better. 3. Contrast issue on nav bar background/text resolved. 4. Paragraph and Header text now on the same margins 5. Title now has the same treatment as the rest of the page 6. When rebuilding the site I tried to follow Lumpy's advice and get the basic layout and functionality with minimal markup. Result was this: http://web.stcloudstate.edu/mtle/basic Adding a few more style properties gets me to a revision of my previous design: http://web.stcloudstate.edu/mtle/ 
|
|
#
?
May 2, 2014 21:44
|
|
|
OtherworldlyInvader posted:Its been a while, but I've updated my site again based off the feedback from here. Much improved, but I personally prefer the basic version. The bubble buttons visually and physically disconnect themselves from the rest of the page, where in the basic version, they act almost like tabs. Try flipping the active / inactive colors so the active one merges with the main content area and reinforces the users sense of place. I'll take a look on something other than my iPad to check out your markup and so on, but you've done a nice job.
|
|
#
?
May 3, 2014 03:48
|
|
|
I'd love to get some thoughts on the design of my movie blog, Smug Film. It's been around since January 2013, so I've been staring at it since then, and as such, can't really look at it objectively anymore. I'm curious how well everything looks and feels and reads to a new visitor. Overall I like it, but I know that some tweaks could make it better. I'd like to know what areas might feel confusing or awkward or distracting. We have a ton of content—over 200 posts, averaging at about 1000 words each—and I'd like the site to be a place someone could kill a lot of time reading pieces.
|
|
#
?
May 10, 2014 08:43
|
|
|
codyclarke posted:I'd love to get some thoughts on the design of my movie blog, Smug Film. It's been around since January 2013, so I've been staring at it since then, and as such, can't really look at it objectively anymore. I'm curious how well everything looks and feels and reads to a new visitor. Overall I like it, but I know that some tweaks could make it better. I'd like to know what areas might feel confusing or awkward or distracting. We have a ton of content—over 200 posts, averaging at about 1000 words each—and I'd like the site to be a place someone could kill a lot of time reading pieces. Just a quickie, because I'm on my phone, but look at the site in a phone. Your navigation is illegible, bylines are illegible, and your body copy is very hard to read. Body copy should be at least 16px on the web. Overall though, the site works pretty well: your content is front and center, and nothing makes me cringe, which is rare.
|
|
#
?
May 10, 2014 13:22
|
|
|
Lumpy posted:Just a quickie, because I'm on my phone, but look at the site in a phone. Your navigation is illegible, bylines are illegible, and your body copy is very hard to read. Body copy should be at least 16px on the web. Overall though, the site works pretty well: your content is front and center, and nothing makes me cringe, which is rare. Thanks, great point. We'll start working on building a good mobile site soon.
|
|
#
?
May 10, 2014 19:14
|
|
|
codyclarke posted:Thanks, great point. We'll start working on building a good mobile site soon. You mean "making your existing site responsive." At least, that's what you hopefully mean...
|
|
#
?
May 11, 2014 03:18
|
|
|
Lumpy posted:You mean "making your existing site responsive." At least, that's what you hopefully mean... Haha, yes. I'll make you proud.
|
|
#
?
May 11, 2014 06:03
|
|
|
How am I doin'? I am trying to go for a really muted color palette, and I think I am at a good spot right now. Can you see anything incredibly obvious in the source that I am messing up/doing wrong or outdated-like? Even though I threw in the Bootstrap CSS to pretty up the page a little bit, this is one of the first designs I've done that doesn't fully mimic what they go for in the Bootstrap documentation. It's my Tumblr blog about video games and other things I'm doing. Very small reader base. None too critical of design, so I have no idea if I'm doing something interesting or not. blog.zfleeman.com
|
|
#
?
Aug 4, 2014 04:22
|
|
|
zfleeman posted:How am I doin'? You are using a monospaced font for your body copy. Do not do that. Monospaced type is harder to read that proportional fonts, and that's why 99.9999% of every book, magazine, well-designed website, etc. does not use monospaced body copy. Line lengths are a little long, but not too bad, if you upped the font size to something more legible like 16px, it would be just about right. It seems some of your posts lack titles, so the only visual cue that you are in a new post is the smallish date block, which you may want to address. All in all though, it's simple and doesn't make me want to die when I visit the page, so it's better than most websites =)
|
|
#
?
Aug 4, 2014 14:38
|
|
|
Your website also has some anime. That's a bad design decision.
|
|
#
?
Aug 4, 2014 14:50
|
|
|
Lumpy posted:You are using a monospaced font for your body copy. Do not do that. Monospaced type is harder to read that proportional fonts, and that's why 99.9999% of every book, magazine, well-designed website, etc. does not use monospaced body copy. This is incredibly helpful, thank you. I'll be switching to something in the Serif section of CSS Font Stack. Making my text 16px will look nice for the long line lengths as well.
|
|
#
?
Aug 4, 2014 16:51
|
|
|
Testing out a redesign of single articles on a Wordpress blog: http://www.fiat500abarth.us/2014/sr-auto-group-project-scorpione (old layout for comparison) My goal was to create minimal, 100% content focused design. I also wanted it to look good on mobile. I'm using ZURB Foundation for most of the CSS. You'll notice there's no header or navigation to speak of, except for in the footer. I did this on purpose. I'm not sure how it's going to affect my SEO, but I wanted a clean slate and I think I've achieved that. I would love any comments on the design or the code. Thanks!
|
|
#
?
Aug 21, 2014 19:21
|
|
|
sim posted:Testing out a redesign of single articles on a Wordpress blog: Needs white space. I also don't care for the headline -> giant photo -> content layout. It's very confusing. Group the headlines with the body content and put the photos in between each topic. I'd also experiment with matching the column width with the width of the photos or at least aligning them all on the left. Something about the center alignment is throwing me off. Also to be honest the site has no character. It resembles something that was automatically generated. Yip Yips fucked around with this message at 23:49 on Aug 21, 2014 |
|
#
?
Aug 21, 2014 23:38
|
|
|
sim posted:You'll notice there's no header or navigation to speak of, except for in the footer. I did this on purpose. jackpot fucked around with this message at 20:48 on Aug 22, 2014 |
|
#
?
Aug 22, 2014 03:44
|
|
|
sim posted:You'll notice there's no header or navigation to speak of, except for in the footer. jackpot posted:You're asking a lot people, when you ask them to relearn web navigation just for your site. This, absolutely. Don't Make Me Think touches on this. It can be hard to strike a balance between usability and being unique, but taking away the top navigation is veering too far towards confusing. If you break a convention, make sure you're actually improving upon it. Removing something people need and expect isn't doing that.
|
|
#
?
Aug 22, 2014 16:46
|
|
|
Okay I gave in to your sound advice and added a header: http://www.fiat500abarth.us/2014/pogea-racing-unlocks-euro-abarth-ecu/
|
|
#
?
Aug 22, 2014 23:16
|
|
|
I like it; and it's nice and simple, like what you're going for.
|
|
#
?
Aug 23, 2014 03:59
|
|
|
sim posted:Okay I gave in to your sound advice and added a header: Looks great. One really nitpicky thing is that the left padding on the logo bothers me a bit, since it means it doesn't align with the title. Other than that I think it's perfect.
|
|
#
?
Aug 23, 2014 19:41
|
|
|
Yeah it's looking a lot better every time I go back to it.
|
|
#
?
Aug 29, 2014 06:59
|
|
|
Thanks! The feedback really helped. I stole the full-width image+caption design from Medium. Actually, I realized I'm basically trying to duplicate Medium, on Wordpress. I also put one ad back in, at the end of the post, using responsive Adsense.
|
|
#
?
Aug 29, 2014 16:36
|
|
|
sim posted:Thanks! The feedback really helped. I stole the full-width image+caption design from Medium. Actually, I realized I'm basically trying to duplicate Medium, on Wordpress. I also put one ad back in, at the end of the post, using responsive Adsense. Look much better. Now change your link decorations so they don't look like somebody is pointing out spelling errors. May I suggest this: code:Then do something cool like one of these because why not? http://tympanus.net/Development/InlineAnchorStyles/
|
|
#
?
Aug 29, 2014 18:06
|
|
|
I am just plain goofin' with Bootstrap on my blog. I threw out a lot of the old style, and pretty much filled my not-very-formatted-at-all text, video and photo posts into a grid. If you poke around the rest of my website, you'll get an idea for the style (or lack thereof) that I'm going for. How would you recommend I mess around with the formatting of my individual posts to make them appear more segmented? I had different background colors for each type of post, but that was a lot more work than it was worth. blog.zfleeman.com
|
|
#
?
Dec 5, 2014 18:19
|
|
|
zfleeman posted:I am just plain goofin' with Bootstrap on my blog. I threw out a lot of the old style, and pretty much filled my not-very-formatted-at-all text, video and photo posts into a grid. If you poke around the rest of my website, you'll get an idea for the style (or lack thereof) that I'm going for. Whitespace. The odd (to my UI guy mind) lack of title and meta info to the right means the column of text reads as one big thing. Without changing layout or content, whitespace is going to be about the only thing you can do. Add something like 5em margin-bottom on .row (since your posts don't have their own class, this might mess up other things, so add a class to your posts!) and see what it looks like, then adjust.
|
|
#
?
Dec 5, 2014 18:53
|
|
|
I recently gave my homepage/travel blog a completely new layout and I could do with some feedback on it! Link: http://travel.leshy.net What is it Basically it's a mostly empty homepage that I just use for practicing webdesign, techniques, best practices and storing images and files. The only real content on it is a collection of travel stories that I wrote during holidays in the past few years, mainly aimed at friends & family, but of course also available to whomever else is interested. I'm currently in the process of also adding English translations since I'd like to be able to share them with a few non-Dutch friends as well, but only one of them is done so far. In technical terms, it's all flat, handwritten PHP/HTML/CSS/jQuery; no CMS or database interaction involved. What happen The old layout was a bit boring and outdated, and I'd only added support to it for mobile devices as a bit of an afterthought. This time I wanted to build a new layout from the ground up featuring a mobile-first design that would make it easily readable and accessible on all devices and hopefully look good too. What am I not yet happy with
So yeah, feel absolutely free to critique and/or make suggestions 
Leshy fucked around with this message at 14:24 on Dec 12, 2014 |
|
#
?
Dec 12, 2014 14:22
|
|
|
Overall this looks nice. The blue isn't my favorite as it's as close to default web blue you can get without being default web blue, but I like that there's a pop of color. Random idea I had while clicking through the site: why not have the blue change to a color derived from the main splash image on the page? This could help each location feel like its own special entity. A few other misc. notes: • @ mobile responsive state the main nav runs into the blue "Reisverslagen" headline, making Reisverslagen look like a piece of navigation. Maybe add some sort of bottom border to the nav? • Calluna is available from Fontspring, who lets you host your own fonts. Could help with your FOUT. • Blue links in your footer are hard to read due to contrast issues. I'd make them a bit brighter. • Your hamburger icon feels huge. I'd keep the link the same size for clickablity, but make the hamburger itself about 2/3 as large. • I wish the second line of dates in your sub nav lined up vertically with the first line (ie. Day 6 starts directly beneath Day 1). Feels like a mistake. • Make your lightbox overlay color black. Photos look better on black, and the gray you're using currently feels dirty. • I might give the active date in the subnav a more obvious treatment. Bold + italic is obvious if I take the time to really look at it, but when I'm scanning my eyes slip past it. Try reducing the opacity?
|
|
#
?
Dec 12, 2014 16:51
|
|
|
Lumpy posted:Then do something cool like one of these because why not? http://tympanus.net/Development/InlineAnchorStyles/
|
|
#
?
Dec 12, 2014 17:39
|
|
|
kedo posted:Overall this looks nice. The blue isn't my favorite as it's as close to default web blue you can get without being default web blue, but I like that there's a pop of color. quote:Random idea I had while clicking through the site: why not have the blue change to a color derived from the main splash image on the page? This could help each location feel like its own special entity. quote:• @ mobile responsive state the main nav runs into the blue "Reisverslagen" headline, making Reisverslagen look like a piece of navigation. Maybe add some sort of bottom border to the nav? quote:• Calluna is available from Fontspring, who lets you host your own fonts. Could help with your FOUT. quote:• Blue links in your footer are hard to read due to contrast issues. I'd make them a bit brighter. quote:• Your hamburger icon feels huge. I'd keep the link the same size for clickablity, but make the hamburger itself about 2/3 as large. quote:• I wish the second line of dates in your sub nav lined up vertically with the first line (ie. Day 6 starts directly beneath Day 1). Feels like a mistake. quote:• Make your lightbox overlay color black. Photos look better on black, and the gray you're using currently feels dirty. quote:• I might give the active date in the subnav a more obvious treatment. Bold + italic is obvious if I take the time to really look at it, but when I'm scanning my eyes slip past it. Try reducing the opacity? Thanks again for the good points. If you or anyone else has any others, suggestions are always welcome!
|
|
#
?
Dec 15, 2014 11:08
|
|
|
Hello everyone! I would really appreciate some feedback. I am a newbie trying to get into freelance and I recently designed and developed my portfolio site. The goal is to instil a sense of web design and development competence when potential freelance clients visit my site. http://aidanwaite.com As an aside, how much would you say I should reasonable charge to design and develop a Wordpress site? (ballpark figure, ignoring functionality and project specifics). Thank you!
|
|
#
?
Apr 9, 2015 13:52
|
|
|
|
| # ? Apr 30, 2024 01:31 |
|
|
I like that it's to the point and unpretentious. The little three.js demo will probably impress some people, but be careful - anyone familiar with three.js (like me) will immediately recognize it as one of the examples from threejs.org, which might come off as a little lazy and/or less than competent. Have some fun and make something cool that's entirely your own. I think the font you're using for the body copy and footer is too heavy, condensed, and small; I'd go with something lighter, larger, and more legible. Remember, the more time people will spend reading a chunk of text, the more readable it needs to be. I also think your two used fonts are way too similar, they look practically identical so I dunno why you'd even bother to have two. Pick two fonts that are different enough to be visually interesting and contrast with each other, but are still complimentary. Super quick example but note how this Fast Company article features different fonts each for headlines, headers, body copy, and pull quotes, which are all noticeably different yet go well together. Typography is arguably the most important aspect of web design, so give it a lot of love! Final nitpick, but your site isn't responsive at all, I did some window resizings and opened it on mobile and it doesn't reflow at all. Definitely something you want your portfolio site to do! Hope that helps, you're off to a good start in general.
|
|
#
?
Apr 10, 2015 04:01
|
|