DEV Community

Cover image for Could you review my design, please?
Silvestar Bistrović
Silvestar Bistrović

Posted on

Could you review my design, please?

Well, this could be a horrible experience, but I need a favor to ask.
Could you take a minute of your time to review the design for my recently released side project: Code Line Daily, please?

Keep in mind that I am not a designer, and I do not have any education in design principles nor in design tooling.

Now, hit me with the best and the worst of comments. 🙈

Once I gather all the feedback, I would implement it in the current site.

Thanks!


The first revision of Author page: https://projects.invisionapp.com/prototype/Code-Line-Daily-cjzlr00lz002fan01i2i608k3/play/a9d28b19


Design prototype: https://projects.invisionapp.com/prototype/Code-Line-Daily-cjzlr00lz002fan01i2i608k3/
Project home: https://cld.silvestar.codes

Top comments (14)

Collapse
 
lexlohr profile image
Alex Lohr

First of all, you should probably use a monospace font for the code, e.g. fira code. This looks grotesk (please excuse the pun). In addition, the description and name look a bit misplaced outside of the box, maybe better put them inside?

Also, having a fixed width is wasting lots of space on wide screens and you have the same font size for every screen size. Maybe consider using calc() and vmin/vmax in your font size.

Collapse
 
starbist profile image
Silvestar Bistrović

Thanks for the suggestions!

Could you be more specific? Which description and name look misplaced?

The design would be responsive. I would definitely use a smaller font for smaller viewports.

Collapse
 
lexlohr profile image
Alex Lohr

which description and name look misplaced?

The one at the bottom of the lines of code boxes.

Thread Thread
 
starbist profile image
Silvestar Bistrović • Edited

You got it wrong. That is the current site, but I am talking about this prototype: projects.invisionapp.com/prototype....

I know the current site is not good. :-)

Thread Thread
 
lexlohr profile image
Alex Lohr

Ah, wrong URL, my bad. In this case, much better, but now it is a bit difficult to distinguish the code from the surrounding information.

Thread Thread
 
starbist profile image
Silvestar Bistrović

I am working on that, yeah. Check out the first revision: projects.invisionapp.com/prototype....

Thread Thread
 
lexlohr profile image
Alex Lohr

Much better. Go easy on the rounded corners, those look a bit overdone.

Collapse
 
moopet profile image
Ben Sinclair • Edited

First the positive:

I like the colours. I like that there are subtly different shades on the background but that the contrast with the text is good where it matters.
I like the large, clear text.

I like the clear indication of the current page with an underline. I'm going to assume that hover states are similar, but just not something implemented in invision.

The logo is neat.

Then the other hand gets to wave about a bit:

I find it difficult to navigate because nothing stands out more than anything else; there's nothing to draw my eye. This means that I have to scan every piece of text on the page to find out what my options are.

The full-width text is too wide and makes my eyes scan left-to-right too far. It's not a problem with a short piece of text, but if you have a page with more content, it'd get tiring and make it harder to keep my place while reading.

I'm not keen on the grid layout. The problem with this sort of layout is that it's not obvious what order things are sorted in. If it's a small page, it could be two columns of blocks, reading down then across, like a newspaper, but if it's a longer page or an infinite scroll then it's probably read across then down.

I don't know how things are sorted. Is it by date or by tag, or some combination?

I think the font is a little bit wooly. I don't have a better word for it than that, but look at words like "Home" in the top right. It feels a tiny bit too rounded and letters like the "H" and "e" look too soft for my taste. It makes it ever so slightly harder to read.

The logo in the header doesn't need to have the site name in it twice. The name inside the light green block will be too small to read when being used in other media like print, and it looks fine with the name hanging off to the right. This is how you use it in the footer, and it looks good there.

Collapse
 
starbist profile image
Silvestar Bistrović

Ben,

I have just updated the Author page (projects.invisionapp.com/prototype...

  • the font is PT Mono,
  • text is narrow,
  • “card” style is updated,
  • added buttons (for interactive elements, needs hover, focus styles), and
  • the logo text is removed.

Would you say I am on the right track?

Collapse
 
starbist profile image
Silvestar Bistrović

Awesome feedback! Thank you so very much.

Collapse
 
notsag profile image
Maxime Gaston

Personally I like the old-school terminal-like design.

The only comment I would make is that I find it difficult to find what's clickable (well without clicking). The mouse pointer doesn't change when hovering the link, the style of the links are the same as normal text, it is quite confusing.

Else it's nice, good job! 👏

Collapse
 
starbist profile image
Silvestar Bistrović

Thank you for the feedback! Nice catch about links.

Collapse
 
steelwolf180 profile image
Max Ong Zong Bao • Edited

Updating your front on the clickable region to be a different front. Colour scheme wise it might be too retro that I won't want to be looking at it.

Maybe u should use the colours schemes from Coolors.co to pick a better scheme for the website.

Collapse
 
starbist profile image
Silvestar Bistrović

The colors are different shades of the theme color, logo color. I might consider using other shades, though.

Thank you!