Mockup #4

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

Projects

None yet

8 participants

@marcustisater
Member

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
Member
ai commented Dec 31, 2015

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

@mxstbr
Member
mxstbr commented Dec 31, 2015

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

@stephenway
Collaborator

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

@marcustisater
Member

That's awesome @stephenway

@marcustisater marcustisater referenced this issue Jan 1, 2016
Closed

Design #12

@marcustisater marcustisater modified the milestone: 1.0 Jan 5, 2016
@stephenway
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

@MoOx
Member
MoOx commented Jan 6, 2016

👍

@marcustisater
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.

@mxstbr
Member
mxstbr commented Jan 6, 2016

👍 love it!

@ai
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
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
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.

@ghost
ghost commented Jan 6, 2016

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

@marcustisater
Member

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

#27

@stephenway
Collaborator

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

@MoOx
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
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".

@mxstbr
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
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
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
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.

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

That sounds good @deannnrie - looking forward.

@marcustisater
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?

@okonet
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
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
Member
ai commented Jan 12, 2016

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

@okonet
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
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
Collaborator
okonet commented Jan 12, 2016

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

@ghost
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
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).

@mxstbr
Member
mxstbr commented Jan 12, 2016

@ai oh wow I now see it too, that would look amazing!

@ai
Member
ai commented Jan 12, 2016

@Promhize but do not forget thet design should contain not only a content, but also a emotions.

The question is about compromise. Babel site have no content on first screen (without scrolling) and it is a big mistake. But we can use 300-500px of vertical space for some branding image, because it shows that PostCSS has big community (because it can spent time for this styling effects).

@ai
Member
ai commented Jan 12, 2016

Some text examples for “What PostCSS does exactly” section:

  • Solve global CSS problem
    With PostCSS plugins from CSS Modules you will be free from any selectors conflict automatically. Local reset by postcss-autoreset and all: initial polyfill from cssnext make your CSS more boilet bullet. [Try it in action]
  • Use future CSS, today If you are use Autoprefixer, you already use PostCSS, because it is just a plugin for PostCSS. With “CSS4” polyfills from other plugin cssnext you can go even further. [Try it in action]
  • Increase code readability [some words about PreCSS, postcss-sorting] [Try it in action]
  • Inline Images [some words about postcss-inline-image, postcss-font-magician] [Try it in action]
  • Lint your CSS With Stylelint you can save your time in code review by automatically lint main CSS mistakes and code style issues. [some words about doiuse and colorguard] [Try it in action](different playground with one input and big warnings list screen)
  • Compress CSS [something about cssnano] [Try it in action](different plyaground with % of saving bytes)

Techinally we can add Lost to “Make your library aviable in Sass, Less or CSS” and RTLCSS to “More”.

@ai
Member
ai commented Jan 12, 2016

Also every plugin in “What PostCSS does exactly” section has a good icon.

@okonet
Collaborator
okonet commented Jan 12, 2016

Here is the follow up:

  1. Decreased the height of the header by putting the navigation into the masthead section. My idea here is then you start scrolling, the logo should zoom out and transition into the center of the navigation.
  2. Made the background image more subtle, so it doesn't distract from the text.
  3. Added GitHub Star button (I think this is very recogniziable for OSS projects)
  4. Tried out a better copy (WIP) with logos on different use cases
  5. Made companies logos look more subtle

I didn't have much time to finilize it. So the REPL part is still here but I think it should be done differently (probably just an example? ideas?)

What are you thinking?

desktop

@mxstbr
Member
mxstbr commented Jan 12, 2016

I like the new nav (cough) and copy. The logo is a
bit overpowering though...

I'm still not convinced having the REPL there is useful, it just looks like
Sass. It might work with a better default example that showcases cssnext,
autoprefixer etc.

On Tue, 12 Jan 2016 19:07 Andrey Okonetchnikov notifications@github.com
wrote:

Here is the follow up:

  1. Decreased the height of the header by putting the navigation into
    the masthead section. My idea here is then you start scrolling, the logo
    should zoom out and transition into the center of the navigation.
  2. Made the background image more subtle, so it doesn't distract from
    the text.
  3. Added GitHub Star button (I think this is very recogniziable for
    OSS projects)
  4. Tried out a better copy (WIP) with logos on different use cases
  5. Made companies logos look more subtle

I didn't have much time to finilize it. So the REPL part is still here but
I think it should be done differently (probably just an example? ideas?)

What are you thinking?

[image: desktop]
https://cloud.githubusercontent.com/assets/11071/12272128/06ce7b14-b95f-11e5-8f35-30f189820884.png


Reply to this email directly or view it on GitHub
#4 (comment).

@ai
Member
ai commented Jan 12, 2016

@okonet Looks awesome!

  1. I always like logo in the center. Of course, it will be har to always keep menu symmetrically. But it looks very fresh and brutal.
  2. Yeap, GitHub start widget is good adition. It gives us more starts and show that it is open source project “in a pictures”.
  3. We can’t have so simple “Try it in action” section, because there is no one PostCSS. Maybe we should have a [Try it in action] button for every item in “Features” section.
  4. I think Plugins search on main page is useful.

There is only one loss for me: previous masthead was more “powerful” :). I remember that I told to fouced on content :). But anyway project title and tagline is not a real content for me. So maybe we can return image contrast? Also we can more logo little it down to have zodiac signs wheel on the image inside a screen.

@simonsmith

@okonet Looks great!

@ai
Member
ai commented Jan 12, 2016

Also I very want to share our mockups in Twitter. But we need to fix Companies section first.

Current list:

  • Google
  • WordPress
  • Taobao or Alibaba
  • webpack

Should we open a issue to collect all our users?

@stephenway
Collaborator

For purposes of this thread, that should be enough for the mockup, but that sounds like a good idea @ai

@stephenway
Collaborator

Update to my version. More content, more complete. I think the missing element is visuals, driving a personal connection to the users. As we define the content strategy I think this will start to show because people see value in differentiation and rich media. I did not include any code examples because I agree that the plugins are where new users will see the value in using PostCSS.

With the brand being established, I think it's important to build up in people's minds the main color version of the logo so that they will have the recall when they see it in the black or white versions elsewhere. Our website has to be a key player in that.

desktop

Edit I did not include a github star button because I don't believe there is one that actually stars the project from the website, so it wouldn't make much sense to give them a button that doesn't do what it advertises.

@ai
Member
ai commented Jan 12, 2016

@stephenway

  1. Community photos in footer is good. Technologies really should be about human. Also it will show PostCSS popularity “in a picture”.
  2. I prefer @okonet header, because it medieval engravings is more close to PostCSS spirit. Also they are much fresh.
  3. Chat and Twitter links should be upper, because they are more important.
  4. We can add Live examples. But not a global one, just add a button under every plugin.
@stephenway
Collaborator

@ai

  1. If you have any more photos that might help from conferences, etc. Or I could come up with a collage of what I can find so far.
  2. So we have this one there is also the philosopher's stone, and the line quality on this one is really brilliant.
  3. Got it.
  4. Easy enough.

desktop

Please note, I changed the gitter icon to a chat bubble, because I don't think a lot of people will understand what it's for with just the logo.

@ai
Member
ai commented Jan 12, 2016

@stephenway

  1. We should make chat link as a text. Like “Support”. It is hard to understand what you will get under chat icon.
  2. Like widget is better, because it brings us more stars and show open source nature more simplier.
  3. Why we need this brush strokes masks?
  4. There is no difference between text fields and buttons.
  5. Yeap, this Basilicae Pholosophicae engraving is not about alchemy. But seems like alchemy was not so popular in engravings, so we have no good image for it.
@stephenway
Collaborator

@ai

  1. Changed to "Support", I agree that does communicate better.
  2. Added star button with the statistic, same as the babel site. Also moved the twitter link down with it.
  3. I thought the brush strokes added personality, but I have hidden them in this iteration so you can see the difference.
  4. Solid buttons now
  5. While it is factual and more inline with alchemy, it doesn't seem to stand out as much. I'll be on the lookout for more options that work with alchemy and stand out at the same time. Thoughts?

desktop

@ai
Member
ai commented Jan 12, 2016

@stephenway looks nice :)

@ai
Member
ai commented Jan 12, 2016

@deannnrie I think design should be always based on real data. You should always put real content on first iteration, because your decision must be based on content.

@stephenway
Collaborator

@deannnrie Also, the final design should based on the color version of the logo. It's not an established brand yet, so we need to build it up in it's unique original version. Thanks for jumping in with us.

@ai @marcustisater What is the timeline for this project? I can continue with a mobile version and a secondary page layout or should we move on a decision so we can assign smaller tasks to those who are willing to help out in design?

@ai
Member
ai commented Jan 12, 2016

@stephenway Right now I wait for third iteration of @okonet design to compare your mockup styles.

But we have much more important problem. We need to select different font in logotype, because Franklin Gothic Book is not a free font, so it can’t be used in open source project.

@ai
Member
ai commented Jan 12, 2016

@deannnrie this is why design is not about images ;). If you can’t get content, developers will not be able too, and your shinny design will look bad in real world.

@okonet
Collaborator
okonet commented Jan 12, 2016

Here is my update that includes:

  1. More "power" in mastehead
  2. Removed REPL section
  3. Added "Installation" section. I even think there is enough place for more highlights.
  4. Proper logos for "Companies using PostCSS" section
  5. Better top navigation with icons
  6. Changed font to Source Code Pro

desktop

@ai
Member
ai commented Jan 12, 2016

@okonet

  1. Could you add button “Try it out” under every item in “Can be done with PostCSS” section? It will open a REPL section with only this plugins.
  2. New mastehead looks awesome (don’t remind me about me words about content based design :D ).
  3. Icons in header is useful to make attention to Support (we will replace it to Support, because we use Gitter). Also they good to keep some sort of symmetry.
  4. Installation section is useful. But we need a tabs to change Gulp to Webpack and Grunt. In future version we will have good wizard to select plugins. So we can miss Installation section if you think it will take too much work.
  5. Should we visually join Plugins and Installation section. But maybe they are joined only in my eyes.
@ai
Member
ai commented Jan 12, 2016

@stephenway @okonet I really want to say thank you. You both make two iteration today.

I will be honest, I prefer @okonet style because it close to PostCSS style. But I think competion is not a good in open source. technically you both have a good ideas. For example, I think community photos from @jonathantneal sketch is very useful. Maybe you can cooperate somehow?

@ai
Member
ai commented Jan 13, 2016

@okonet also what font do you use in mastehead?

@ai
Member
ai commented Jan 13, 2016

@okonet I just found that items in “Can be done with PostCSS” section has a link in title. You planned to open REPL after a click on title? It saves a lot of space and save us from repeating. But I afraid it is not so obviously. Especially, because we should force users to try REPL for every plugins set :).

@stephenway
Collaborator

@ai Always happy to help!

Open source and design are very different in nature, especially early on when it comes to layout. The design process can be a collaborative process, but when it is not, it's best to let each designer follow their vision to see it through. Now that we have a design that is established we can finish content strategy and figure out what the next tasks are to design.

@okonet The brand is very new, so I think it would be beneficial to the organization if we included it on the site in color and in the right typeface, whatever that will be after the next round tomorrow.

@mxstbr
Member
mxstbr commented Jan 13, 2016

@okonet love the latest, your style is great. The offset search bar is
nice, the masthead looks powerful and the whole thing is coherent. And
while the Installation section needs tabs for different build systems, I'd
love to have that there.

I'm not sure about the NavBar and the titles-are-links approach to the
plugins. I don't agree with @ai that adding a button under each plugin is
the way to go though. Maybe make the whole title and paragraph of each
plugin clickable and change to the pointing cursor when hovered over them?

On Wed, 13 Jan 2016 02:45 Stephen Way notifications@github.com wrote:

@ai https://github.com/ai Always happy to help!

Open source and design are very different in nature, especially early on
when it comes to layout. The design process can be a collaborative process,
but when it is not, it's best to let each designer follow their vision to
see it through. Now that we have a design that is established we can finish
content strategy and figure out what the next tasks are to design.

@okonet https://github.com/okonet The brand is very new, so I think it
would be beneficial to the organization if we included it on the site in
color and in the right typeface, whatever that will be after the next round
tomorrow.


Reply to this email directly or view it on GitHub
#4 (comment).

@marcustisater
Member

Sorry, it's been a couple of busy days at work for me. I will try summaries my feedback on these submissions as well. Good job everyone, really great to see things going!

@okonet
Collaborator
okonet commented Jan 13, 2016

I've done one more iteration:

  1. Added explanation section (ala Babel) to make it clear how it works. I think it is also important to communicate.
  2. To compensate of lost space I removed the tagline from masthead. I think it was too much anyway.
  3. Added community section (we can load userpics directly from GitHub — https://github.com/postcss/postcss/graphs/contributors
  4. Experimented with fonts: trying to unify the design language (more ⚗ FTW). Not sure if it's "too much" now. Thoughts?
  5. Added "call to action" buttons at the bottom.
  6. Removed Installation section — I think it should not be on the home page after all. The goal is to communicate (boldly 👊) what's PostCSS and who is behind it. Am I wrong?

Feedback?

desktop

@peterramsing

👍

@stephenway
Collaborator

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

@ai
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
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
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
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.

@mxstbr
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
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
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
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
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 ?

@marcustisater
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!

@ai
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
Collaborator
okonet commented Jan 15, 2016

I'll try to update it this weekend.

This was referenced Jan 16, 2016
@marcustisater
Member

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

This was referenced Jan 16, 2016
@marcustisater
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.

@stephenway
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.

@marcustisater
Member

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

@stephenway
Collaborator

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

@MoOx
Member
MoOx commented Jan 19, 2016

Maybe you should host it here directly.

@stephenway
Collaborator

@MoOx Could you expand on that idea?

@MoOx
Member
MoOx commented Jan 19, 2016

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

@stephenway
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?

@marcustisater
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.

@okonet
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
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
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
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
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!

@okonet
Collaborator
okonet commented Jan 20, 2016

@ai got it. Will try it out soon.

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

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

@okonet
Collaborator
okonet commented Jan 22, 2016

@ai something like this?

image

@ai
Member
ai commented Jan 22, 2016

@okonet yeap!

@marcustisater
Member

I like it too.

Submit PR with sketch files

@Xaviju Xaviju referenced this issue in frontfest/design 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