Feedback redesign of vimberlin.de

[wikimatze]

Hi there,

feel free to say, what you like or change about the current page. You can see the beta page under http://vimberlin.wikimatze.de

[tqmz]

hey @wikimatze, thanks for your effort, and for involving the community for feedback.

I like the startpage with the slightly darker jumbotron and the well aligned header.

All in all, I think the site works quite well this way and I'm aware it's beta. So I found some points which all are minor only (numbers for reference only, not weighted):

All

1. Footer: I find the “copyright” and “powered by” too much weighted, maybe decrease font size?
2. Footer: “Follow Us“ section goes below “About Us” section too early (when still enough place at left and right).
3. Footer: “Contact”: I'd use a separate page here with hints on both Mailinglist, IRC / Gitter, Twitter, Mail and Website comments (maybe mention the Titanpads, too – it's possible to use a vimberlin or vimfest namespace there to provide all pads by one link).
4. Footer: “Vimfest“ – should be written consistently (upper vs. lower vs. camel case).
5. Header: “Imprint” does not need to be linked in header, it's meta.
6. Header: “Vimberlin” (logo word) might link to start page.

Welcome

1. Logo word and welcome headline shouldn't be of ~ same size, I'd use a smaller logo word.
2. “Our next meetup: TBA” looks a bit out of alignment, how will the full teaser / article look like there?
3. “Home” is a bit out of time, maybe call it “Welcome” or “Intro”.
4. Vim is not linked, so random visitors won't get any idea about what it is (a powder for cooking?).

Blog

1. What about expanding the first article by default? (Why one click more each time I open the site?)
2. Highlighting of code words too large.
3. Comments: HashOver is a nice approach, maybe the form can be made look a bit more flat and simple? Did you have a look at https://github.com/jacobwb/hashover-next, too?

Newsletter, Imprint

1. Do not need to scale over the whole page.

Apart from that, as besides developers and admins also writers might use Vim, I'd find a more careful set punctuation marks attractive in general, but I know it takes time to apply it.

And, while I find the site absolutely viewable and easy to use, it still looks quite close to Bootstrap. Maybe that can be changed a bit in future iterations: the site doesn't have to look like Vim in a terminal (altough it could, with a clean bright colorscheme applied), but some e. g. status bar or typefaces could influence some parts of the site, like the navigation.

Thanks again for all your work on Vimberlin and Vimfest and I hope to sooner or later find time and sufficient skills to contribute by more than comments on the sites.

[wikimatze]

Hi @tqmz,

thanks for the feedback so far - they were all valid and I changed most of the things you've mentioned. I have the following questions:

1. “Our next meetup: TBA” looks a bit out of alignment, how will the full teaser / article look like there?

Can you give an example how it can look like?

Comments: HashOver is a nice approach, maybe the form can be made look a bit more flat and simple? Did you have a look at https://github.com/jacobwb/hashover-next, too?

I've tried hashover-next but run into to many issues, I've tweaked the layout a little bit more but don't know what can be improved in which way.

it still looks quite close to Bootstrap

it's bootstrap :smile: and yeah, we can change colors and the overall look and feel but may main focus was to great a responsive layout with big fonts and easy navigation. Maybe we need a designer with a good idea for it.

I'd find a more careful set punctuation marks attractive in general

What do you mean with that?

Do not need to scale over the whole page.

You mean they are meta and should be stay in the footer + contact page?

Thanks for your feedback, it really helped me.

[tqmz]

hey @wikimatze,

Hi @tqmz,

thanks for the feedback so far - they were all valid and I changed most of the things you've mentioned. I have the following questions:

    “Our next meetup: TBA” looks a bit out of alignment, how will the full teaser / article look like there?

Can you give an example how it can look like?

I guess either two or three text columns (like for different articles on the start page), or one column only but aligned centrally so it matches the central alignment of the previous sections.

Comments: HashOver is a nice approach, maybe the form can be made look a bit more flat and simple? Did you have a look at https://github.com/jacobwb/hashover-next, too?

I've tried hashover-next but run into to many issues, I've tweaked the layout a little bit more but don't know what can be improved in which way.

Okay, good to know.

it still looks quite close to Bootstrap

it's bootstrap :smile: and yeah, we can change colors and the overall look and feel but may main focus was to great a responsive layout with big fonts and easy navigation. Maybe we need a designer with a good idea for it.

I'd find a more careful set punctuation marks attractive in general

What do you mean with that?

Small details like using a dash instead of a hyphen, or “typographic” quotes.

Do not need to scale over the whole page.

You mean they are meta and should be stay in the footer + contact page?

No, their content width could be reduced (half width or so), especially the newsletter mail address input field is quite long ;)

[wikimatze]

I've ordered the content in the "jumbotron" and improve the layout of the comment feature (as well remove only admin relevant input fields). I also decrease the col-md size from full 12 to 10 - IMHO it's more readable now.

[wikimatze]

I've cleaned up the comments a little bit.

[wikimatze]

It's done, we are live!