Github Markdown Project

Ok guys,

I have finished my Github Markdown Previewer project with React:

Please, let me know what do you think and how could be improved.

It look super boring. Are you afraid of colors or something?
Furthermore if you are a beginner it looks kinda okay :slight_smile: keep going you get their

1 Like

Not at all, I like color palette. I just wanted to match brand colors from github. I think i will be “brave” and put some color on it.

1 Like

It looks pretty nice, sure it isn’t flashy or anything, but it doesn’t look bad.

When the page is stacked give the top editor some min-height to give a bit more space to write in.

Good job, keep it up!

The layout was inspired in google translate as I see that 2 columns, one for input text and one for output, was a similar UX needed in this challenge.

As I suppose they have several people working on UX/UI I have copied their measures, like media queries at 1280px and 720px. When google translate window is less than 720px, the top editor is set a max-height: 120px, but I set it at 180px. I know both are short measures, but i think they know why it should be that way in terms of UX, if you think of it you only look to the editor when you are typing, but you look the previewer more than 60% or 70% of the time because the overall output matters to you.

I think sometimes is useful get inspiration in layout design from some well known Apps from big players, if you analyze them carefully you start thinking why they take those decisions.

@lasjorg I really appreciate your feedback, It let me share my thoughts on how i approached to this challenge. I hope to keep receiving feedback and advice from you.

I think that UX might be based on the fact that you are more likely to have copied and pasted the text to be translated. And you are also more focused on the translated text than the original.

This is not really the case with a markdown writer, here you (IMO) want more space for writing.

Anyway, it is totally up to you of course.

A layout that might be interesting to try when the layout is stacked, is having a tabbed view with just one box for both the markup and output that you can switch between. Like you have on GitHub issues for example.

   Text | Preview
|-------------------|
|-------------------|
|-------------------|
|-------------------|
|-------------------|

This is obviously more work, but it might be fun to try. Just a thought I had.

1 Like

I think it’s pretty good, love that you’ve kept it so clean and elegant, the color choice is good imo.

@lasjorg
Ok, so I modify the heigh to give editor more space (300px).
I made some other little adjustment to the stacked view.

@KittyKora
Now there are two versions of this App, one black and white and one with colors. What do you think now?



The chosen color palette is the following: https://coolors.co/69fff1-63d471-d4e6d6-6a7152-233329

@mayankverma thanks for your opinion. There is a new colored version, which one do you prefer?

Personally, I think it is better. It gives some more room for typing.

As for the colors, both are fine. The colored one does look a bit more interesting. For the black and white, I would probably give the body color a slight gray tone to avoid the pure white as that can be a little harsh.

Here is another thing you can try, using a theme switcher and letting the user switch between the colors. Again, it’s just an idea for something to play with.

1 Like

Colored one has my preferance it looks more daring.