Learning Design - Feedback on what I have so far?

Design Design for Developers Tutorial
1

Hi there! I posted for help a few days ago on where to go for help. Thanks for the responses so far. I’ve gotten a good portion of the “framework” done on my site now, and just need to look at tweaking typography and colors.

Here is what I have so far: ColbyCheeZe

Any suggestions going forward, or things I should keep in mind when building a blog? I’ll focus on the small details like adding comments, analytics, logos, etc etc later. Just want to get something basic going so I can start making content!

1 Like
2

It’s looking great so far, it’s straightforward has a good amount of contrast. I would get rid of all the em tags/italicized text, however. I’m not a web designer (at least that’s not what my official job title says), but I think em tags/italics are generally reserved for emphasis.

See here for a more intelligent response to the subject. I tried swapping out the em tags with paragraph elements in my console and it looks a lot cleaner in my opinion.

3

Bah, I think I accidentally deleted my original response.

It looks very good so far, but my only suggestion would be to get rid of all the italics. I think simple paragraph tags or blockquotes would be better suited for the summaries below the blog titles.

Here’s a discussion on the use of italics in web design: typography - On which occasions would you use italics in web design? - Graphic Design Stack Exchange.

Another critique I have would be to try and constrain the blog title so they’re in the same column as the article content:

4

I’d just say that it’d be great to make it mobile friendly. I can give you some tips on this if you need them :wink:

5

Looks good! I’m not a designer, but a few small comments:

  • In the Recent Articles section, the entries which wrap over two lines look like two separate links. A minor adjustment to the whitespace between links would would help.
  • The italics styling seems a little overused. I don’t think it works well for headers in the right-side bar.
  • Perhaps introduce a sans-serif font or an additional color to give some more variety to the page elements.
6

Thanks @carlesjove Yea that is on my todo list. I just have to create breakpoints and then figure out how to get like the sidebar to render below the content right? Any links you have would be great.

7

Thanks @andyw8 I’ll play around with those things!

8

Alright I’ve taken a lot of feedback from various people and have iterated a bit more. I think it looks a lot better now. I still have a lot of work to do, and I hate my section…and not 100% sure about colors, but I think I am on the right track. ColbyCheeZe

9

Hey @colbycheeze !
Sorry for the delayed answer.
I’m generally a fan of the mobile first approach, which means that you basically have a single column layout, and then wrap up multiple column layout within @ media blocks.
By default, HTML block elements span the whole width and pile up onto each other, so you don’t need to do anything. Just have your general styles there, and done. Then, you can take the current CSS that generates columns (I guess mainly floats and widths) and put them into a media block.

If you prefere the non mobile first approach, then you’ll have to write a media block for some max-width, and set float to noneon those elements that are floated, and width=100% to elements that have a smaller width (sidebar, main content, etc).

Navigation menu is a little bit more complicated, but I generally use a similar approach. Having list elements pile on each other, and then write some simple JavaScript that hides de navigation block and places a button somewhere. Then, a media block for larger screens where you’d place your current styles.

Hope this helps! Just say that Responsive Web Design is a really good book to learn more about this :wink:

10

Thanks! I’ve read a bit about the subject, but I just haven’t had a chance to implement it yet. I’m slowly learning though, thanks for the book recommendation.