4

I would like to start off with: 'I am not a designer'. I am a programmer. I was hoping some of you design guru's could comment on the design I have made for my portfolio site.

I tried to make the design responsive and seem to like the result, yet there is always room for improvement. The site follows a google white space style, and is meant to be look cleanly.

Some things to ignore for the time being:

  • I am yet to fix the fact that blog content centers in mobile view.
  • I am yet to fix the width of the facebook comment box overflowing in mobile view.

One more thing I am wondering about is whether or not the font choice is readable? I have a feeling something else could improve the user experience.

Here are some pictures:

enter image description here

enter image description here

enter image description here

enter image description here

enter image description here

  • why don't any of your portfolio links work? – maxwell Oct 24 '15 at 4:45
  • because they're placeholders. I'll just link them to the project page of whatever it will be. – Max Oct 24 '15 at 4:49
  • I think overall you did a very good job, it looks nice, it's clean and simple, and I guess you're not done on the tweaking. The only thing that bothers me a bit is the space between the title and your main black text/body on the blog. I think you could add double the spacing you have now below the titles. You could also make that body text a bit smaller (on the blog, for example) but keep the same line-height or similar. It will be more light and aerated. Colors are great! Nice portfolio elements by the way! I like the simplicity of the homepage too. Nice fonts. – go-junta Oct 24 '15 at 4:52
  • Is this better? s24.postimg.org/catroeo6t/better.png – Max Oct 24 '15 at 4:56
  • Be aware that "fullstack" means absolutely nothing to 90% (or more) of clients you may encounter. It's jargon and very, very confusing to anyone who is not actually a developer/designer themselves. – Scott Oct 24 '15 at 5:15
5

A few random thoughts and impressions:

  • There’s plenty of whitespace between the larger elements on the site as a whole (i.e., between the menu and the main container, between the header and the rest, etc.)—on a large screen, perhaps even a bit too much, at least in the middle. The menu is quite close to the left edge of the screen and the main content to the right edge, and there’s a big gap between the two. In other words, there’s lots of whitespace, but it’s all in the middle of the window, with only a little on the sides. This is particularly noticeable on the blog page: Too much whitespace

  • There’s not enough whitespace between the individual text elements in the main content area. This is especially noticeable in the blog, where the different blog entries are difficult to tell apart and look very crammed in. There seems to be about 10px between the end of the first entry and the header of the second.

  • The length of each line of text is much too long on a wide screen. An optimal line length is generally somewhere between 50 and 75 characters per line; on my (15” MacBook Pro Retina) screen with a resolution of 1920×1200 and the browser window filling up the entire width of the screen, the first line in the first blog post has 129 characters—about twice as much as it ought to have.

  • Your typography seems a bit random. The site header and content headers use Raleway; your menu uses the default sans-serif font for the OS (and will thus be different depending on what you’re viewing the site on—not, I would say, an advantage for a menu); and your copy uses Verdana. Both Verdana and the default sans-serif are, by design, fairly ‘anonymous’ and stay in the background, design-wise, but they are still different, and using both does not work well here.
    I would suggest stepping down to using just two fonts. Raleway is all right, but (personal opinion here) works best when paired with a serif font; something, perhaps, like Linden Hill, or you could even go discreet and simply use Georgia, which is ubiquitous enough that it is almost generic and steps into the typographic background.

Here is a very quick-and-dirty modified version (made just by altering the CSS in the browser’s inspector, so not too reliable) with a bit more space to the left of the menu and less on the right, as well as some more harmonious line lengths, leading, and spacing between text elements (headers/paragraphs). Also with a slightly different shade of grey, just because. I hope you agree that this is more pleasant to read than the original, at least on a wide screen.

Modified mockup

On a markup level:

  • Don’t use empty paragraphs to add spacing between elements—that’s what margins are for!

  • I’m not sure what’s going on with the gradient in the <pre> tags on the main blog page (not on the individual entries), but get rid of it if you can—it looks horrible.

  • Use proper <a> tags for links, rather than JavaScript unless there’s a good reason for the JavaScript. And always make sure the user is made aware they’re clicking on something that will move them to a different page, in this case an individual blog entry. As it is now, there’s nothing to indicate this, and it’s not clear that what’s on the main blog page are just snippets, either.

  • Great advice. Thanks for spending so much time on this. I would like to mention that any ugly html code in the blog is fully the fault of the implemented tinyMCE wysiwyg editor. The <pre><code></code><pre> are required by the code snippet syntax highlighter. – Max Oct 24 '15 at 15:00
  • Ah, I think I just figured out the cause of the gradient. It’s of course meant to be that the bottom part of a snippet is faded out, to make it clear that it’s a snippet. That fading effect, however, does not play nicely with the grey-background <pre> elements, which end up looking quite mangled. You could perhaps filter out the <pre> elements from the blog entry snippets on the main blog page. – Janus Bahs Jacquet Oct 24 '15 at 15:05
  • I have to use javascript for the div link because there are <a> tags throughout my blog posts. You can't have <a> tags within <a> tags. I did add cursor: pointer, so that people know they are on a link. – Max Oct 24 '15 at 21:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.