Skip to content
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
Closed

Mockup #4

marcustisater opened this issue Dec 31, 2015 · 94 comments

Comments

@marcustisater
Copy link
Member

@marcustisater 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
Copy link
Member

@ai ai commented Dec 31, 2015

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

@mxstbr
Copy link
Member

@mxstbr mxstbr commented Dec 31, 2015

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

@stephenway
Copy link
Collaborator

@stephenway stephenway commented Dec 31, 2015

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

@marcustisater
Copy link
Member Author

@marcustisater marcustisater commented Dec 31, 2015

That's awesome @stephenway

@marcustisater marcustisater mentioned this issue Jan 1, 2016
@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
Copy link
Collaborator

@stephenway 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
Copy link
Contributor

@MoOx MoOx commented Jan 6, 2016

👍

@marcustisater
Copy link
Member Author

@marcustisater 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
Copy link
Member

@mxstbr mxstbr commented Jan 6, 2016

👍 love it!

@ai
Copy link
Member

@ai 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
Copy link
Member

@ai 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
Copy link
Member Author

@marcustisater 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
Copy link

@ghost ghost commented Jan 6, 2016

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

@marcustisater
Copy link
Member Author

@marcustisater 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
Copy link
Collaborator

@stephenway stephenway commented Jan 7, 2016

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

@MoOx
Copy link
Contributor

@MoOx 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
Copy link
Member Author

@marcustisater 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
Copy link
Member

@mxstbr 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
Copy link
Contributor

@MoOx 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
Copy link
Member

@mxstbr 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
Copy link
Member Author

@marcustisater 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
Copy link
Contributor

@MoOx MoOx commented Jan 9, 2016

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

@MoOx MoOx mentioned this issue Jan 9, 2016
@marcustisater
Copy link
Member Author

@marcustisater 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
Copy link
Member

@ai 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
Copy link
Collaborator

@okonet okonet commented Jan 15, 2016

I'll try to update it this weekend.

This was referenced Jan 16, 2016
@marcustisater
Copy link
Member Author

@marcustisater 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
Copy link
Member Author

@marcustisater 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
Copy link
Collaborator

@stephenway 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
Copy link
Member Author

@marcustisater marcustisater commented Jan 19, 2016

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

@stephenway
Copy link
Collaborator

@stephenway stephenway commented Jan 19, 2016

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

@MoOx
Copy link
Contributor

@MoOx MoOx commented Jan 19, 2016

Maybe you should host it here directly.

@stephenway
Copy link
Collaborator

@stephenway stephenway commented Jan 19, 2016

@MoOx Could you expand on that idea?

@MoOx
Copy link
Contributor

@MoOx MoOx commented Jan 19, 2016

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

@stephenway
Copy link
Collaborator

@stephenway 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
Copy link
Member Author

@marcustisater 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
Copy link
Collaborator

@okonet 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
Copy link
Member

@ai 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
Copy link
Collaborator

@okonet 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
Copy link
Member

@ai 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
Copy link
Member Author

@marcustisater 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
Copy link
Collaborator

@okonet okonet commented Jan 20, 2016

@ai got it. Will try it out soon.

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

@marcustisater
Copy link
Member Author

@marcustisater 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
Copy link
Collaborator

@okonet okonet commented Jan 22, 2016

@ai something like this?

image

@ai
Copy link
Member

@ai ai commented Jan 22, 2016

@okonet yeap!

@marcustisater
Copy link
Member Author

@marcustisater marcustisater commented Jan 22, 2016

I like it too.

Submit PR with sketch files

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
8 participants
You can’t perform that action at this time.