Design mockup for our new site

Hello everyone,

I have made a design mockup for our new site. It still uses the old, not yet final name “expert engine”, as I have not yet updated the screen shots to the “Codidact” name. Don’t worry about that.

It is also possible to style the whole thing easy, for example I could mimic the Meta.SE-design:

What’s missing right now is:

  • some icons for top bar (achievements and review/moderation tools)
  • interactivity (only in my .html-file, will be open to review later)
  • content design (aka questions page)

How do you like the design concept? What could be improved, especially with regards to accessibility?

2 Likes

(Reposting commentary following RFC by @luap42 on Discord.)

Just saw it. Looks clean and familiar. The top bar reminds me of Microsoft for some reason.
Maybe it’s the ‘message’ icon. But that’s not a problem.
What does Discussions lead to?

1 Like

We’re going to need to get designers involved. This is good as a prototype, but I wouldn’t like it to be our final design without having someone who knows about design and UX review it first; I imagine our frontend engineers will have some idea of the basics, but that’s no guarantee. Particularly, we need to make sure we’re doing well on things like UX and accessibility (and preferably internationalization, too, but that’s more a subject for the app developers).

4 Likes

I was an avid follower of UX Stack Exchange.

Just chiming in on something - there’s good reason for the link to Meta to be placed as it is on SE right now:

image

  1. It’s at the top-header level, so that’s a good hint that Meta is a site-wise feature, not page-wise (like Wikipedia’s Talk pages)
  2. It’s “hidden” behind a menu button that provides equally easy access to ‘Help’, thus making it a little less likely that users will land on it without knowing much about how the site works, if at all.

(IMO, meta is for those who care enough to browse around and get familiar with the platform - I wouldn’t want the absolutely clueless parachutting there, as that’d be potentially overwhelming.

Btw: I believe Meta or Meta site discussions or something like this is most appropriate as a feature name.

4 Likes

Clean and simple – good start.

Things to consider early, because it’s easier to bake in than retrofit:

  • accessibility: tooltips, colors, contrast, text size, how does the page work with zoom?
  • different viewport sizes: how does it look on a phone, if your window is <1000px wide, on a tablet?
  • using screen real-estate well: for example, a multi-column format where some columns are short leaves a lot of whitespace, unless we flow the text. Making sections collapsible is one way to mitigate this; there are probably others.
2 Likes

I think it is too close to the name of the hyphen site.

Yes, that’s true. When I wrote the post, we had “expert engine” as a code name, as there had not yet been a decision on our project name. In the meantime we chose “Codidact”, however I didn’t yet update the screenshots. I’ll edit the post to clarify.

Seems to be some weird use of fonts - I especially hate Rock Salt on “Ask Question” - which somewhat conflict with the professional look of the site. Using one font for the entire site (e.g Proxima Nova) would be a far better option.

I’m not a huge fan of the tabs being at the top of the screen embedded into the text box - embedded tabs imply the ability to swap between them rapidly, and it’s most likely that those tabs would load a complete new page rather than very quickly swapping to the users tab.

The sidebar seems remarkably empty, and I didn’t notice the help or discussions tabs at first, because they were not at all obvious.

Would there be an option for a dark theme?
Why is the messages icon so thin?
Will there be anything next to names, such as badges - if not, why bother having it there?

Finally, there only seems to be one question on the front page. Do you have to scroll down to find the next question? That would get very tedious very quickly. I am sure my face would go from :slightly_smiling_face: to :face_with_symbols_over_mouth:.

There should be only one font (Open Sans). The “Ask Question”-button has small caps on (same as sidebar header), which serves as a mean to highlight it.

I see your point, however having them “floating” between the banner header and the content box doesn’t look good to me.

The elements of the sidebar are to be decided. This draft focusses on its styles (segmentation with small-caps headers).

I put the help(discussion tabs on the right side for a reason, namely, that they are of less priority for normal site use, however I am not fixed on that.

This is already under discussion here:

I agree. I already made it thicker in my local draft, however I didn’t update this thread:

new message icon

Possibly, however that is not within the scope of this topic. See here:

The content design is not yet developed in that draft. I have however made another draft for that, which you can see here:

2 Likes

I am marking this as declined, in favor of new drafts that are currently being worked on in Discord.