New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mockup #4

Closed
marcustisater opened this Issue Dec 31, 2015 · 94 comments

Comments

Projects
None yet
8 participants
@marcustisater
Member

marcustisater commented Dec 31, 2015

We are going to be designing the website from scratch and I think a good idea is to get up a mockup up for review as soon as possible.

These are some initial thoughts from ticket 391

omgovic

How about a section where some people will say ideas of plugins?

admdh

[THE LOOK] Maybe it would be good idea to introduce PostCSS like something more luxury, more ambitious? Something that make trends and not follows them. For example just look at bootstrap and foundation websites i think they look like 90th now. PostCSS website definitely shouldn't be like that. i think PostCSS website can, or even should be more conceptual.

[THE FEATURES] i think the most important feature of the website should be well organised documentation, easy to use, easy to find. Maybe search page like gulpjs.com has (as it was mentioned before). I think it would be good if there were rules which plugins will be recommended first (for example those which have good documentation) and which last (with bad documentation). maybe plugins statistics.

@marcustisater marcustisater added this to the Sprint 1 milestone Dec 31, 2015

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Dec 31, 2015

Member

@mxstbr can help with new official plugin category. We should use awesome relevation algorith from npmseach.com

Member

ai commented Dec 31, 2015

@mxstbr can help with new official plugin category. We should use awesome relevation algorith from npmseach.com

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Dec 31, 2015

Member

@ai definitely, already have experience with that. Will watch the repo and wait for the mockups!

Member

mxstbr commented Dec 31, 2015

@ai definitely, already have experience with that. Will watch the repo and wait for the mockups!

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Dec 31, 2015

Collaborator

I'll be working up a comp today, and will post when it is ready.

Collaborator

stephenway commented Dec 31, 2015

I'll be working up a comp today, and will post when it is ready.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Dec 31, 2015

Member

That's awesome @stephenway

Member

marcustisater commented Dec 31, 2015

That's awesome @stephenway

@marcustisater marcustisater referenced this issue Jan 1, 2016

Closed

Design #12

@marcustisater marcustisater removed this from the Sprint 1 - Mockup & Planning milestone Jan 3, 2016

@marcustisater marcustisater modified the milestone: 1.0 Jan 5, 2016

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 6, 2016

Collaborator

Based on feedback I've seen so far, I've come up with a rough mockup for today's meeting. It's wording isn't expanded on yet, but you can get the general look and feel we are going for. Progressive & an alchemy theme. Unfortunately, my kids and I have fallen ill today, I was up off and on all night so I will do my best to be active and present at the meeting, but just in case, here's the latest state of the mockup. Artwork is for placement only right now (but I think it works well in how it's placed).
desktop

🔭 Link to the wizard

Collaborator

stephenway commented Jan 6, 2016

Based on feedback I've seen so far, I've come up with a rough mockup for today's meeting. It's wording isn't expanded on yet, but you can get the general look and feel we are going for. Progressive & an alchemy theme. Unfortunately, my kids and I have fallen ill today, I was up off and on all night so I will do my best to be active and present at the meeting, but just in case, here's the latest state of the mockup. Artwork is for placement only right now (but I think it works well in how it's placed).
desktop

🔭 Link to the wizard

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 6, 2016

Member

👍

Member

MoOx commented Jan 6, 2016

👍

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 6, 2016

Member

Wow, this looks absolutely brilliant. I really like the way you have combined the clean look with an alchemy touch on it. I am sorry to hear you guys got sick, feel better. No worries if you can't make it.

Member

marcustisater commented Jan 6, 2016

Wow, this looks absolutely brilliant. I really like the way you have combined the clean look with an alchemy touch on it. I am sorry to hear you guys got sick, feel better. No worries if you can't make it.

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jan 6, 2016

Member

👍 love it!

Member

mxstbr commented Jan 6, 2016

👍 love it!

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 6, 2016

Member

Let’s replace “Featured Plugins” title to “Why PostCSS is useful”. So every plugin will be a story why PostCSS can make your development process better.

Also, I think we can move this “Why PostCSS is useful” section upper. It is out main section and it should be visible without scroll.

Member

ai commented Jan 6, 2016

Let’s replace “Featured Plugins” title to “Why PostCSS is useful”. So every plugin will be a story why PostCSS can make your development process better.

Also, I think we can move this “Why PostCSS is useful” section upper. It is out main section and it should be visible without scroll.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 6, 2016

Member

Old man image is awesome. Is it free?

Maybe we can put it to footer and make little bit more contrast. Also it will allow us to use lazy load for it. We should load first content that is important for user.

Member

ai commented Jan 6, 2016

Old man image is awesome. Is it free?

Maybe we can put it to footer and make little bit more contrast. Also it will allow us to use lazy load for it. We should load first content that is important for user.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 6, 2016

Member

Remember that it's a mockup 😜

but great point @ai about visibility without scroll that should definitely be taking under consideration when creating the final design visual.

Member

marcustisater commented Jan 6, 2016

Remember that it's a mockup 😜

but great point @ai about visibility without scroll that should definitely be taking under consideration when creating the final design visual.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jan 6, 2016

I think the overall theme should follow that of getgrav.org

ghost commented Jan 6, 2016

I think the overall theme should follow that of getgrav.org

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 7, 2016

Member

Can we start breaking this down into smaller parts as mentioned during the meeting? Small PRs for better and faster feedbacks.

#27

Member

marcustisater commented Jan 7, 2016

Can we start breaking this down into smaller parts as mentioned during the meeting? Small PRs for better and faster feedbacks.

#27

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 7, 2016

Collaborator

Once we have a template and establish overall theme, I think we can.

Collaborator

stephenway commented Jan 7, 2016

Once we have a template and establish overall theme, I think we can.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 9, 2016

Member

This does not take in consideration the recently update brand https://github.com/postcss/brand
Btw, the sentence is too long imo.

Member

MoOx commented Jan 9, 2016

This does not take in consideration the recently update brand https://github.com/postcss/brand
Btw, the sentence is too long imo.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 9, 2016

Member

Howdy @deannnrie - Thanks for sending in a mockup for postcss.com. As @MoOx mentioned, we do have a very strict brand to follow but I think overall you added in some very good points to take notes from.

Quick feedback

  • GitHub link is great in nav - adds in as a very nice shortcut that a lot of people recognize right away.
  • Great set of menu-links
  • Simple landing screen with "Get Started" button guides visitors right away.

Unfortunately you are a little bit late to the party. We are however going to be creating more issues next week in design development when #27 is resolved. Be on the lookout for label "design needed".

Member

marcustisater commented Jan 9, 2016

Howdy @deannnrie - Thanks for sending in a mockup for postcss.com. As @MoOx mentioned, we do have a very strict brand to follow but I think overall you added in some very good points to take notes from.

Quick feedback

  • GitHub link is great in nav - adds in as a very nice shortcut that a lot of people recognize right away.
  • Great set of menu-links
  • Simple landing screen with "Get Started" button guides visitors right away.

Unfortunately you are a little bit late to the party. We are however going to be creating more issues next week in design development when #27 is resolved. Be on the lookout for label "design needed".

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jan 9, 2016

Member

To be honest though, I think "transform your CSS with JS" isn't a good tagline. As a new user, I'll be thinking "Why would I want to do that? Fuck off." and not look at the project a second time.

I think the tagline should be something that sells the benefit, not how the benefit is achieved.

Member

mxstbr commented Jan 9, 2016

To be honest though, I think "transform your CSS with JS" isn't a good tagline. As a new user, I'll be thinking "Why would I want to do that? Fuck off." and not look at the project a second time.

I think the tagline should be something that sells the benefit, not how the benefit is achieved.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 9, 2016

Member

my tagline proposal do that same as babeljs but for CSS. Because that what it does. PostCSS is a CSS compiler. :D

Member

MoOx commented Jan 9, 2016

my tagline proposal do that same as babeljs but for CSS. Because that what it does. PostCSS is a CSS compiler. :D

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jan 9, 2016

Member

I don't think that's the right way to go. That just opens up the question "Why do I need a CSS compiler?" (which is what we should answer with the tagline), and if since we don't immediately answer that I think a lot of first timers won't be intrigued by PostCSS.

Member

mxstbr commented Jan 9, 2016

I don't think that's the right way to go. That just opens up the question "Why do I need a CSS compiler?" (which is what we should answer with the tagline), and if since we don't immediately answer that I think a lot of first timers won't be intrigued by PostCSS.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 9, 2016

Member

I get the point but I think the tagline for PostCSS has been there for too long for it to change. Everyone seems to explain PostCSS this way as well, that sets a mark.

Member

marcustisater commented Jan 9, 2016

I get the point but I think the tagline for PostCSS has been there for too long for it to change. Everyone seems to explain PostCSS this way as well, that sets a mark.

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 9, 2016

Member

Don't think it's a reason to keep it. Opening an issue for it.

Member

MoOx commented Jan 9, 2016

Don't think it's a reason to keep it. Opening an issue for it.

@MoOx MoOx referenced this issue Jan 9, 2016

Open

Tagline #46

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 9, 2016

Member

That sounds good @deannnrie - looking forward.

Member

marcustisater commented Jan 9, 2016

That sounds good @deannnrie - looking forward.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 9, 2016

Member

@stephenway can we try organize a more approachable way of getting a template and established theme ready. This issue can easily become very confusing for new incomers. Talk gitter later?

Member

marcustisater commented Jan 9, 2016

@stephenway can we try organize a more approachable way of getting a template and established theme ready. This issue can easily become very confusing for new incomers. Talk gitter later?

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 12, 2016

Collaborator

Here is my quick sketch. It needs more work, but the main idea is to show most common use-cases above the fold and also show some examples (or even integrate the REPL, not sure if this is useful on index page tho).

I think it would be cool to link use cases with the example below. So when clicking on the link, the example should be updated corresponedntly. It needs a better layout to connect it visually tho.

desktop

Collaborator

okonet commented Jan 12, 2016

Here is my quick sketch. It needs more work, but the main idea is to show most common use-cases above the fold and also show some examples (or even integrate the REPL, not sure if this is useful on index page tho).

I think it would be cool to link use cases with the example below. So when clicking on the link, the example should be updated corresponedntly. It needs a better layout to connect it visually tho.

desktop

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jan 12, 2016

Member

Oooh I like that @okonet, nice!

I'm not sure the REPL makes sense on the index page, I think the "Featured Plugins" section in @stephenway's design makes more sense, since new users won't really know what to try out in there.

Member

mxstbr commented Jan 12, 2016

Oooh I like that @okonet, nice!

I'm not sure the REPL makes sense on the index page, I think the "Featured Plugins" section in @stephenway's design makes more sense, since new users won't really know what to try out in there.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 12, 2016

Member

@deannnrie we should focused on content, so gid block with one sentence is not a best way.

Member

ai commented Jan 12, 2016

@deannnrie we should focused on content, so gid block with one sentence is not a best way.

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 12, 2016

Collaborator

@mxstbr yes, I also think this way. I'll update it later.

BTW the logo in the masthead could have a subtle CSS glow animation, something like Apple's heart-beat on older Macs.

Collaborator

okonet commented Jan 12, 2016

@mxstbr yes, I also think this way. I'll update it later.

BTW the logo in the masthead could have a subtle CSS glow animation, something like Apple's heart-beat on older Macs.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 12, 2016

Member

@okonet Looks good:

  1. We should focused on content. Your image is not so big. But maybe let’s combine this image with a menu to win some vertical space?
  2. The best way to explain PostCSS is a plugins list.
  3. PostCSS is not a Sass to have simple playground. Maybe each plugin in Featured Plugins list can be opened to Playground?
Member

ai commented Jan 12, 2016

@okonet Looks good:

  1. We should focused on content. Your image is not so big. But maybe let’s combine this image with a menu to win some vertical space?
  2. The best way to explain PostCSS is a plugins list.
  3. PostCSS is not a Sass to have simple playground. Maybe each plugin in Featured Plugins list can be opened to Playground?
@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 12, 2016

Collaborator

@ai yes, I agree on that. Will update a bit later

Collaborator

okonet commented Jan 12, 2016

@ai yes, I agree on that. Will update a bit later

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Jan 12, 2016

Exactly what I was about to say. If I may chip in, I think if the image has no descriptive purpose, it shouldn't be included. I even think there's no reason to have any image on the comp.

That better represents what postcss actually is.

Just my honest opinion.

I saw "the Swiss army knife of css development" on tutsplus. And i thought that should be paired with "limitless possibilities with JavaScript plugins" like a heading and subheading

ghost commented Jan 12, 2016

Exactly what I was about to say. If I may chip in, I think if the image has no descriptive purpose, it shouldn't be included. I even think there's no reason to have any image on the comp.

That better represents what postcss actually is.

Just my honest opinion.

I saw "the Swiss army knife of css development" on tutsplus. And i thought that should be paired with "limitless possibilities with JavaScript plugins" like a heading and subheading

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 12, 2016

Member

Ouh, I see so awesome visual effect with this background.

When user will hover on white PostCSS logo, we can highlight it (blur filter effect) and start rotate two wheels (with letters and signs of the zodiac) in different directions (just cut them from the image to separated layouts and use rotate animation).

Member

ai commented Jan 12, 2016

Ouh, I see so awesome visual effect with this background.

When user will hover on white PostCSS logo, we can highlight it (blur filter effect) and start rotate two wheels (with letters and signs of the zodiac) in different directions (just cut them from the image to separated layouts and use rotate animation).

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 13, 2016

Collaborator

@okonet How are you addressing the new logo in your design?

Collaborator

stephenway commented Jan 13, 2016

@okonet How are you addressing the new logo in your design?

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 13, 2016

Member

@okonet

  1. Alchemy font is hard to read, but it was qute experiment.
  2. Community photos is not so important, so we can put it under companies and maybe “Call to action” buttons.
  3. It is hard to show one example of PostCSS. It has different syntax and tasks. It can be a one source to explain it. What do you think about just open REPL from one item in main usage examples? Or we can show all these 6 usage examples as sections in a horizontal list.
Member

ai commented Jan 13, 2016

@okonet

  1. Alchemy font is hard to read, but it was qute experiment.
  2. Community photos is not so important, so we can put it under companies and maybe “Call to action” buttons.
  3. It is hard to show one example of PostCSS. It has different syntax and tasks. It can be a one source to explain it. What do you think about just open REPL from one item in main usage examples? Or we can show all these 6 usage examples as sections in a horizontal list.
@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 13, 2016

Collaborator

@ai Regarding 3. — my idea was not even make it interactive, but just show a principle: CSS (Scss, Less) in → PostCSS → CSS out. Also I wanted to draw a logical link between PostCSS and plugins.

I changed 1 and 2. Take a look.

@stephenway until postcss/brand#9 is resolved, I don't think this is the issue. But I'm open to it. What's your proposal?

desktop

Collaborator

okonet commented Jan 13, 2016

@ai Regarding 3. — my idea was not even make it interactive, but just show a principle: CSS (Scss, Less) in → PostCSS → CSS out. Also I wanted to draw a logical link between PostCSS and plugins.

I changed 1 and 2. Take a look.

@stephenway until postcss/brand#9 is resolved, I don't think this is the issue. But I'm open to it. What's your proposal?

desktop

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 13, 2016

Collaborator

@ai

What do you think about just open REPL from one item in main usage examples?

Yes, that's the idea: by clicking on each example, we should navigate to the REPL page with the pre-loaded examples.

Collaborator

okonet commented Jan 13, 2016

@ai

What do you think about just open REPL from one item in main usage examples?

Yes, that's the idea: by clicking on each example, we should navigate to the REPL page with the pre-loaded examples.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 13, 2016

Member

Here is my take from @okonet mockup

Things to be overlooked

  • I don't like the masthead to be honest, the background-image looks something taken out of the Game of Thrones series and the logo is "connected" to the background-image, that dosen't speak to me.
  • The navbar has too much opacity and should be reconsidered not being on top of the background-image, the colors should also follow the WCAG practices.
  • I don't think we in any way should mention Sass/Less/Stylus, it's a way of promoting. We are moving away from it. I know this is pre-content that we can change but I am just putting the word out there.
  • The logotype you put for MinifyCSS is CSSNano I believe 😉

I just pointed out things we should reconsider, you did a good job so don't take this as an insult. I would love for this front-page to really be beginner friendly for new visitors.

I'm going to leave this decision over to @ai and @stephenway to decide for final template. I think however we need a bit more retakes on this to really get a perfect mockup.

Member

marcustisater commented Jan 13, 2016

Here is my take from @okonet mockup

Things to be overlooked

  • I don't like the masthead to be honest, the background-image looks something taken out of the Game of Thrones series and the logo is "connected" to the background-image, that dosen't speak to me.
  • The navbar has too much opacity and should be reconsidered not being on top of the background-image, the colors should also follow the WCAG practices.
  • I don't think we in any way should mention Sass/Less/Stylus, it's a way of promoting. We are moving away from it. I know this is pre-content that we can change but I am just putting the word out there.
  • The logotype you put for MinifyCSS is CSSNano I believe 😉

I just pointed out things we should reconsider, you did a good job so don't take this as an insult. I would love for this front-page to really be beginner friendly for new visitors.

I'm going to leave this decision over to @ai and @stephenway to decide for final template. I think however we need a bit more retakes on this to really get a perfect mockup.

@mxstbr

This comment has been minimized.

Show comment
Hide comment
@mxstbr

mxstbr Jan 13, 2016

Member

I don't like the masthead to be honest, the background-image looks something taken out of the Game of Thrones series and the logo is "connected" to the background-image, that dosen't speak to me.

I don't agree, I think the masthead looks amazing. Imagine the wheels turning inside each other, with the logo in the middle, like @ai posted above.

The navbar has too much opacity and should be reconsidered not being on top of the background-image, the colors should also follow the WCAG practices.

👍 agreed.

The logotype you put for MinifyCSS is CSSNano I believe

The title is always what the plugin does, not the name of the plugin. What does cssnano do? It minifies your CSS. :-) The logo is the correct one.

Member

mxstbr commented Jan 13, 2016

I don't like the masthead to be honest, the background-image looks something taken out of the Game of Thrones series and the logo is "connected" to the background-image, that dosen't speak to me.

I don't agree, I think the masthead looks amazing. Imagine the wheels turning inside each other, with the logo in the middle, like @ai posted above.

The navbar has too much opacity and should be reconsidered not being on top of the background-image, the colors should also follow the WCAG practices.

👍 agreed.

The logotype you put for MinifyCSS is CSSNano I believe

The title is always what the plugin does, not the name of the plugin. What does cssnano do? It minifies your CSS. :-) The logo is the correct one.

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 13, 2016

Member

@marcustisater

  1. Sorry, but this Game of Trones style (Middle Ages) is a style of PostCSS. It is good, because it is fresh looks and separes us from many other modern JS tools. It is bad when your site looks too similar to Babel.
  2. Do not look into text too hard. It is only mockups. Of course, we should try to use real content. But it exactly text is not important.
  3. But you are right, PostCSS is not a Sass. We can't show PostCSS in one example.
  4. I like black header. But maybe your are right. Readability is too important.
Member

ai commented Jan 13, 2016

@marcustisater

  1. Sorry, but this Game of Trones style (Middle Ages) is a style of PostCSS. It is good, because it is fresh looks and separes us from many other modern JS tools. It is bad when your site looks too similar to Babel.
  2. Do not look into text too hard. It is only mockups. Of course, we should try to use real content. But it exactly text is not important.
  3. But you are right, PostCSS is not a Sass. We can't show PostCSS in one example.
  4. I like black header. But maybe your are right. Readability is too important.
@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 13, 2016

Member

@okonet I like a visual part of current REPL, but it has two important issue:

  1. Click behavior is too unclear. Some users could think that it is just a plugin page.
  2. We should force users to see that PostCSS is not a one way. That it can be very different.

Maybe really we should make a separated section from every example and put opened REPL there. Main purpose of first page is a explain PostCSS. And having 6 examples explains good, that PostCSS is not a Sass replacement (it is current main misunderstanding).

Guys, what do you think?

Member

ai commented Jan 13, 2016

@okonet I like a visual part of current REPL, but it has two important issue:

  1. Click behavior is too unclear. Some users could think that it is just a plugin page.
  2. We should force users to see that PostCSS is not a one way. That it can be very different.

Maybe really we should make a separated section from every example and put opened REPL there. Main purpose of first page is a explain PostCSS. And having 6 examples explains good, that PostCSS is not a Sass replacement (it is current main misunderstanding).

Guys, what do you think?

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 13, 2016

Member

My 2 cents: you are trying to do too many things in a single issue. You should iterate via small PRs or not gonna have a website until weeks/months.

Member

MoOx commented Jan 13, 2016

My 2 cents: you are trying to do too many things in a single issue. You should iterate via small PRs or not gonna have a website until weeks/months.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 14, 2016

Member

The purpose of this issue was to create a first draft mockup and then make it into an full visual design with small PRs.

@stephenway - What is the plan from #27 ?

Member

marcustisater commented Jan 14, 2016

The purpose of this issue was to create a first draft mockup and then make it into an full visual design with small PRs.

@stephenway - What is the plan from #27 ?

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 15, 2016

Member

@okonet if you can come up with some changes from the previous comments and the plugin section that @ai mentioned - I think we are ready to move on. Agreed or do we need more time?

No rush, thanks!

Member

marcustisater commented Jan 15, 2016

@okonet if you can come up with some changes from the previous comments and the plugin section that @ai mentioned - I think we are ready to move on. Agreed or do we need more time?

No rush, thanks!

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 15, 2016

Member

@okonet here is my new thoughts:

  1. Maybe we can set links in menu to white (#fff) to increase a readability. I think it will be enough.
  2. I am thinking that plugin search is not good for “call to action” idea. Page should have only main call to action. The ideal case for us:
    1. user came to page
    2. see a design and masthead and understand that we have too much resources to draw it
    3. read a examples and try REPLs in every one
    4. see a big companies names and understand that PostCSS is production ready
    5. go to setup wizard
      So we can add a plugin search to the wizard after all question and our best practices soluton. We will ask user to search other plugins.
  3. So I think we need two buttons in “Call to Action” section: “How to Setup PostCSS” and “Read More” (best article section).
Member

ai commented Jan 15, 2016

@okonet here is my new thoughts:

  1. Maybe we can set links in menu to white (#fff) to increase a readability. I think it will be enough.
  2. I am thinking that plugin search is not good for “call to action” idea. Page should have only main call to action. The ideal case for us:
    1. user came to page
    2. see a design and masthead and understand that we have too much resources to draw it
    3. read a examples and try REPLs in every one
    4. see a big companies names and understand that PostCSS is production ready
    5. go to setup wizard
      So we can add a plugin search to the wizard after all question and our best practices soluton. We will ask user to search other plugins.
  3. So I think we need two buttons in “Call to Action” section: “How to Setup PostCSS” and “Read More” (best article section).
@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 15, 2016

Collaborator

I'll try to update it this weekend.

Collaborator

okonet commented Jan 15, 2016

I'll try to update it this weekend.

This was referenced Jan 16, 2016

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 16, 2016

Member

Sounds good, then we have to move on to the other pages and start with the #15

Member

marcustisater commented Jan 16, 2016

Sounds good, then we have to move on to the other pages and start with the #15

This was referenced Jan 16, 2016

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 19, 2016

Member

@okonet - I don't want to stress 😅 but did you manage to get some updates for the mockup? It does not need to be 100% to perfection.

@stephenway - if you have any spare minutes off this busy week to talk through some OSD, that would be awesome. Talk gitter, take care.

Member

marcustisater commented Jan 19, 2016

@okonet - I don't want to stress 😅 but did you manage to get some updates for the mockup? It does not need to be 100% to perfection.

@stephenway - if you have any spare minutes off this busy week to talk through some OSD, that would be awesome. Talk gitter, take care.

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 19, 2016

Collaborator

@marcustisater Will do, we will need to get a repo going with the sketch file for @okonet 's design so we can get going on OSD.

Collaborator

stephenway commented Jan 19, 2016

@marcustisater Will do, we will need to get a repo going with the sketch file for @okonet 's design so we can get going on OSD.

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 19, 2016

Member

Sure, maybe we can collab all together on an OSD "boilerplate" repo on top of that as well.

Member

marcustisater commented Jan 19, 2016

Sure, maybe we can collab all together on an OSD "boilerplate" repo on top of that as well.

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 19, 2016

Collaborator

Make the repo and I'll populate it with my OSD gulp/sketchtool setup 😄

Collaborator

stephenway commented Jan 19, 2016

Make the repo and I'll populate it with my OSD gulp/sketchtool setup 😄

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 19, 2016

Member

Maybe you should host it here directly.

Member

MoOx commented Jan 19, 2016

Maybe you should host it here directly.

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 19, 2016

Collaborator

@MoOx Could you expand on that idea?

Collaborator

stephenway commented Jan 19, 2016

@MoOx Could you expand on that idea?

@MoOx

This comment has been minimized.

Show comment
Hide comment
@MoOx

MoOx Jan 19, 2016

Member

Just push your sketch in this repo since it should be the reflect of this repo result.

Member

MoOx commented Jan 19, 2016

Just push your sketch in this repo since it should be the reflect of this repo result.

@stephenway

This comment has been minimized.

Show comment
Hide comment
@stephenway

stephenway Jan 19, 2016

Collaborator

The goals of this new repo would be to make a boilerplate for other designers to fork and design off of per page layout. So if we were to use this repo for that purpose, we would end up with 20+ sketch files alongside the website itself. I think approach could hurt the open nature of OSD, mainly because you should be able to fork quickly and iterate without any extra cruft. This might fall in line with your idea to do smaller PRs since we can selectively decide which forks are addressed in the org repo.

@marcustisater Thoughts?

Collaborator

stephenway commented Jan 19, 2016

The goals of this new repo would be to make a boilerplate for other designers to fork and design off of per page layout. So if we were to use this repo for that purpose, we would end up with 20+ sketch files alongside the website itself. I think approach could hurt the open nature of OSD, mainly because you should be able to fork quickly and iterate without any extra cruft. This might fall in line with your idea to do smaller PRs since we can selectively decide which forks are addressed in the org repo.

@marcustisater Thoughts?

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 20, 2016

Member

It might sound confusing but in the long run it's a better decision to make another repo rather then pushing everything in here. This would also be a great thing to form out a starter-boilerplate from for others to fork.

We have to make sure that the other repo is well documented and "linked" to this one, also maybe an contributing guideline for designers. It might also be a wise decision to create small issue for fast PRs.

Member

marcustisater commented Jan 20, 2016

It might sound confusing but in the long run it's a better decision to make another repo rather then pushing everything in here. This would also be a great thing to form out a starter-boilerplate from for others to fork.

We have to make sure that the other repo is well documented and "linked" to this one, also maybe an contributing guideline for designers. It might also be a wise decision to create small issue for fast PRs.

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 20, 2016

Collaborator

I've made one more attempt to incorporate all feedback I've got so far. I went back to a more subtle masthead section since I think that the previous one drove too much attention away from the content. We would be missing the famous red color of the logo as well.

The "REPL" section should have pre-defined examples so when the user selects one plugin from a list, it should update both parts (or just one). We still need to think about it, since it will not work for stylelint as is. But I think we could display a terminal output on the RHS for this plugin.

There are some rough parts in this mockups I don't quite like but I think if we all agree on a direction, these should be resolved as atomic updates.

I can check in both mockups into the repository (here or a new one?).

desktop

Collaborator

okonet commented Jan 20, 2016

I've made one more attempt to incorporate all feedback I've got so far. I went back to a more subtle masthead section since I think that the previous one drove too much attention away from the content. We would be missing the famous red color of the logo as well.

The "REPL" section should have pre-defined examples so when the user selects one plugin from a list, it should update both parts (or just one). We still need to think about it, since it will not work for stylelint as is. But I think we could display a terminal output on the RHS for this plugin.

There are some rough parts in this mockups I don't quite like but I think if we all agree on a direction, these should be resolved as atomic updates.

I can check in both mockups into the repository (here or a new one?).

desktop

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 20, 2016

Member

@okonet looks great, but we have 2 problems with REPL section:

  1. Each plugin description is most important part on this page. But to put it to buttons, we wrote it is small font.
  2. The main purpose of this page is to show REPL examples to user. But user see only one. He need special interaction to see other.

So maybe we should just add subsection for every plugin without switcher? Anyway latest mockup have small height, so we have a space.

Member

ai commented Jan 20, 2016

@okonet looks great, but we have 2 problems with REPL section:

  1. Each plugin description is most important part on this page. But to put it to buttons, we wrote it is small font.
  2. The main purpose of this page is to show REPL examples to user. But user see only one. He need special interaction to see other.

So maybe we should just add subsection for every plugin without switcher? Anyway latest mockup have small height, so we have a space.

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 20, 2016

Collaborator

@ai just to make it clear: what do you mean by "add subsection for every plugin without switcher"? Separate pages for each plugin? Can you do a quick paper sketch of what do you mean?

Collaborator

okonet commented Jan 20, 2016

@ai just to make it clear: what do you mean by "add subsection for every plugin without switcher"? Separate pages for each plugin? Can you do a quick paper sketch of what do you mean?

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 20, 2016

Member

@okonet not separated page, just add a section for every plugin on this page:

## Autoprefixer

Desc

[Input] → [Output]

## CSS Modules

Desc

[Input] → [Output]
Member

ai commented Jan 20, 2016

@okonet not separated page, just add a section for every plugin on this page:

## Autoprefixer

Desc

[Input] → [Output]

## CSS Modules

Desc

[Input] → [Output]
@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 20, 2016

Member

I talked briefly with Audrey and we think i'ts best to leave it up for a quick "vote" if we should create a new repository or not for the Open Source Deisgn - #96

Good work @okonet - I like the new version and would love to get you're opinion if we should create a new repository or not, maybe you have some past experience with this?

Let's keep #96 short and simple - keep on moving!

Member

marcustisater commented Jan 20, 2016

I talked briefly with Audrey and we think i'ts best to leave it up for a quick "vote" if we should create a new repository or not for the Open Source Deisgn - #96

Good work @okonet - I like the new version and would love to get you're opinion if we should create a new repository or not, maybe you have some past experience with this?

Let's keep #96 short and simple - keep on moving!

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 20, 2016

Collaborator

@ai got it. Will try it out soon.

@marcustisater thanks. I'll chime up in #96

Collaborator

okonet commented Jan 20, 2016

@ai got it. Will try it out soon.

@marcustisater thanks. I'll chime up in #96

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 21, 2016

Member

This is a good start, adjustments can be made on the front-end or later sketches. Great work with the mockups, now we have to move on to the layouts.

@okonet - can you upload the mockups to an Zeplin account #98 and to the repo as well? @stephenway boilerplate should be ready in any day.

Moving on to #97

Member

marcustisater commented Jan 21, 2016

This is a good start, adjustments can be made on the front-end or later sketches. Great work with the mockups, now we have to move on to the layouts.

@okonet - can you upload the mockups to an Zeplin account #98 and to the repo as well? @stephenway boilerplate should be ready in any day.

Moving on to #97

@okonet

This comment has been minimized.

Show comment
Hide comment
@okonet

okonet Jan 22, 2016

Collaborator

@ai something like this?

image

Collaborator

okonet commented Jan 22, 2016

@ai something like this?

image

@ai

This comment has been minimized.

Show comment
Hide comment
@ai

ai Jan 22, 2016

Member

@okonet yeap!

Member

ai commented Jan 22, 2016

@okonet yeap!

@marcustisater

This comment has been minimized.

Show comment
Hide comment
@marcustisater

marcustisater Jan 22, 2016

Member

I like it too.

Submit PR with sketch files

Member

marcustisater commented Jan 22, 2016

I like it too.

Submit PR with sketch files

@Xaviju Xaviju referenced this issue Jun 30, 2016

Closed

Frontfest logo #1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment