search

yiisoft-contrib / yiiframework.com

Source code for official Yii website
http://yiiframework.com/
Other
261 stars 100 forks source link

Propose Mockups for Official Site #72

Closed hscstudio closed 8 years ago

hscstudio commented 8 years ago

I only propose for new official site

yii2 official site

http://www.hafidmukhlasin.com/2015/11/26/yii2-rebranding-yii-framework-official-site/

jacmoe commented 8 years ago

It looks good, but I think that - given the current stage - it would be better if you helped out with the current effort - we are bit beyond mockups and concepts :)

You could either fork or interact more indirectly. However, good ideas, and I will probably steal something from it. Thanks :)

samdark commented 8 years ago

By @eshill:

index

rob006 commented 8 years ago

@samdark This looks really cool. Download button could be bigger. Somewhere nearby should be also a button for GitHub repo. But apart from that, it looks really great and contains all the important information.

samdark commented 8 years ago

@jacmoe what do you think?

jacmoe commented 8 years ago

I think it is a bit on the busy side, but it definitely has some niceties :) I think the best time to think about integrating would be not until I've completed the overall skeleton. A day or two, I think.

samdark commented 8 years ago

OK.

jacmoe commented 8 years ago

It is really, really nice :) I don't want to dismiss it - but I am slightly preoccupied at the moment. Does @eshill have a working prototype or is it a pure graphical mockup?

SilverFire commented 8 years ago

@eshill preview looks promisingly

samdark commented 8 years ago

@jacmoe he did working prototypes for yiiframework.ru: http://eshill.ru/yii/project_view.html so he probably can do it this time as well.

jacmoe commented 8 years ago

Good to know :)

This is the front so far: yiilogo15

The logo image should perhaps be smaller and the logo font larger - I think it is slightly out of balance right now. And we haven't decided on the font either, but I think Josefine (with Roboto) works well.

jacmoe commented 8 years ago

The featured section - 3 columns - will be made same height using a technique I am to investigate. Bootstrap 4 has this feature, but for Bootstrap 3 we probably have to cheat a bit (perhaps a small script).

There will be a Getting Started section under the 3 column feature section with 3 steps to success.

Then there will be two colums with stuff (news?)

Powered by Yii (show case) - using a gray filter on the logos to make it classy.

And testimonials.

After that, ,I think it's time to do something about the Guide/API sections..

muhammadcahya commented 8 years ago

I'm so sorry if disturbing euphoria of bootstrap What do you think about zurb foundation (for the site) ?

For now Bootstrap 4 still an alpha, but new zurb foundation 6 has started the final version now, and can be used or implemented right now. Yes both Bootstrap or Foundation is good, but foundation is not mainstream (I think), more lightweight, and have a good design pattern concept. How about this, what's you're oppinion ?

I apologize for example the design of the above, according to the website I think must show the identity, especially of the logo (representing the colors of the logo, or one dominant color), so that the logo and the website can be aligned and harmonized.

But I'm so sorry, with respect to who makes, design the above in my opinion was bland and boring in terms of color, do you also think so ?

I do not have much time to make a sketch from zero, if there who can give me psd, or any other that I can edit ?

jacmoe commented 8 years ago

I personally prefer Foundation - and I am excited about Foundation 6 ! It is really powerful. I have always preferred Foundation over Bootstrap.

But, Bootstrap 4 is actually usable right now, and I almost can't resist the temptation to use it! It is now based on Sass, and they have cleaned up the css a whole lot and made it much easier to override all the things. And they have finally moved from pixels to ems. :) I especially like the new Bootstrap cards..

jacmoe commented 8 years ago

Do you really think that my screenshot was boring? :cry:

Edit: yiilogo17

Between the feature boxes and the testimonial/powered-by section there should be a Getting Started section and a couple sections with news, etc.

muhammadcahya commented 8 years ago

I'm so sorry, yes I think so :( But that's just my opinion, probably maybe others people more like it :)

jacmoe commented 8 years ago

If you are a little bit bored, I guess I am happy with that. Because my goal is to avoid making the site too busy - I want the content to be in focus the boss. It should not be too busy. :) I am not sure if I am able to achieve that goal, but I am trying. Right now I am making sure that it is easy to change all settings: fonts, colours, layout.. so that we eventually can get a site that we are happy with.

Edit And I am aware that the 'hero' section - top blue one - needs some additional work. It still doesn't feel right. It should be tightened.

muhammadcahya commented 8 years ago

I'm sorry I did not post mockup yii sites, but hopefully this design can refresh your ideas and inspiring. Sorry if there would be long scroll :p

[Removed] Sorry for long scroll :)

jacmoe commented 8 years ago

Wow - that's a lot of concepts :)

To be honest, it looks like that many of todays designs are made by girls..

I prefer a more 'manly' design.

There are interesting design patterns, though.

muhammadcahya commented 8 years ago

Btw I like @samdark post about @eshill design :) But I don't know the yiiframework.ru language :p

Girls or 'manly' design I think it's about color @jacmoe I only refresh about 'concepts', layout, and positioning with design above, because I'm busy at the moment, so I'm so sorry for now I can't give an idea about the sketch mockup You can chose 'manly' colors for 'manly' design @jacmoe, it's up to you

Sorry, Do you think your mockup has are already 'manly' design, the colors you chose already a 'mainly' colors ?

But i noticed here, Yii for All People, All Person, not separate for one/specific gender, whether yii only for Men ?

hscstudio commented 8 years ago

I think some designs that proposed by @muhammadcahya have same pattern in color.. its use soft color.. its great and modern.. it's not about girly or manly.. please use soft blue.. current design https://github.com/yiisoft-contrib/yiiframework.com still use dark blue.. :)

jacmoe commented 8 years ago

Dude you are too serious! You must admit that the preference for pastel colours that a lot of people have these days are not exactly what you'd normally associate with manliness. Take a look at Phalcon homepage - really awful design! Don't attack me or my views when you don't know either -I have been civil towards you.

Anyway,since we already are working on the new site,I think we need to be more specific. Otherwise this topic is wasting time...

muhammadcahya commented 8 years ago

@jacmoe I'm not serious, maybe you are responding to this too seriously :) With all my respect to you, I do not mean to attack you

I always appreciate your opinion as well as any person, my comment above just my opinion, just my advice about mockup, I'm so sorry if you think my words is wrong or as attack

Best Regards

jacmoe commented 8 years ago

It would be a big mistake if the new Yii homepage ends up looking like a thousand other websites. That is not the goal. The goal is to be bold and to grab peoples attention.

Soft and washed out colours are great for social hubs, newssites, and the like, IMO.

jacmoe commented 8 years ago

Anyway, when I am done doing the initial theme, then you are free to change the blue to a light cyan if you like :) Hopefully I have made it very easy to change the looks.

jacmoe commented 8 years ago

Muhammad: peace :) I think that we might be direct people both of us - do not worry about it :p

jacmoe commented 8 years ago

I can make a version of the front tomorrow without the blue, but I can't make a softer or lighter blue. That would introduce a fourth color.. The palette is Yii green, Yii blue and Yii yellow and then various whites and greys.

hscstudio commented 8 years ago

@jacmoe: I appreciate Your work and design, but I very love Yii too, so permit me to correct Your mockup..

yii mocakup

jacmoe commented 8 years ago

Gray does not work for the featured section, so I used blue..

You can see the updated front page here: local yiiframework com-1280x768

Since I am using a svg for the logo at the front, it is missing from the screenshot because pageres does not handle that. Will switch to a png or jpg once I know what size it should be. Also, the logo in the nav bar is the old logo. We need to agree on what logo we should use..

jacmoe commented 8 years ago

Since pageres did not handle the shadow filter: highlight3

jacmoe commented 8 years ago

I tried gray for the powered by Yii section, but stay.com is white so it disappeared when I applied a grayscale filter on it. I kind of like the blue.. The colours can always be changed. That is not my current focus right now - just making sure that the content gets in and looks good together.

Edit: Hold on.. Stay.com has got a new, blue logo...

hscstudio commented 8 years ago

You have do significant improvement.. I like it (y) But I have some added..

  1. Please see @eshill design... maybe you can combine it.. they are: color of panel menu.. I prefer blue dark instead of black; add more content in the middle.. for example: book, video etc..
  2. For footer.. I prefer You use my first mockup.. start form TESTIMONIALS until bottom..
  3. You dont force all image as svg.. it's difficult you may use image..
samdark commented 8 years ago

@jacmoe yes, I'll update Stay.com logo. I have a vector source for it.

jacmoe commented 8 years ago

@samdark I already updated it from the svg :)

See my last commit in my monster PR.

-> https://github.com/jacmoe/yiiframework.com/commit/b8f297b79254404ae3eade3e966598200adf6d4e

jacmoe commented 8 years ago

Thanks @hscstudio :) Yes, there will be more sections on the front page.

Good idea about the navbar - I'll try a dark blue. And look more at the @eshill design, when I am ready.

I won't use svg's when I am done because regular png/jpgs are smaller and more widely supported - it's just easier to test things out when you have images that can take any size easily :)

jacmoe commented 8 years ago

This is a test with a blue navbar: highlight5

samdark commented 8 years ago

Looks better IMO.

jacmoe commented 8 years ago

It grows on you, yes. :)

Will probably change the top-bar to the same grey colour as the footer - let's see..

We still have to decide on what font/logo to use - I am happy with Josefine and Roboto, but ..

jacmoe commented 8 years ago

Dark topbar: yiisite3

samdark commented 8 years ago

Much worse.

jacmoe commented 8 years ago

Yes - maybe the previous top-bar colour was better?

samdark commented 8 years ago

Absolutely.

samdark commented 8 years ago

Current (live website) logo is OK overall. We can try removing gradients from it so it looks flat and "modern" but to me it's good as is. As for "yiiframework" text, I'm not sure what to do with it. To me, again, it's OK. See @eshill mock on how it may look like.

The font overall could be changed but the decision is to be made based on how guide/API text looks with it and how readable it is.

jacmoe commented 8 years ago

I like our current logo - the petals part of it :)

Right now we are using Josefine for the headers - and logo - and Roboto for everything else (I think).

It seems to look good with the guide as well.

Josefine is pretty close to the font in the current logo. I will check out @eshill s mock.

jacmoe commented 8 years ago

I changed the color for the topbar links to a dark grey: yiisite4

I think that looks better than the blue (default) links.

SilverFire commented 8 years ago

I think the last is the best in the thread. However, we still can make it better. @jacmoe I'm highly appreciating your work, thank you very much! I'm not a UX/UI man, so don't treat my feedbacks as pro-advises.

I think black word "framework" might be lightened.

SilverFire commented 8 years ago

Update: Okay, it's not black, it's gray, but my shity TN-display on laptop makes it black :(

jacmoe commented 8 years ago

I have thought the same thing @SilverFire - yes: the word 'framework' ought to be lighter.

It is too 'gloomy' right now.

And, perhaps - when it's lighter - I will see if changing the blue 'framework' in nav-bar logo to the same grey will work.

I am no UX guru either - it has always been a weak spot of mine. That's why I grabbed this opportunity to level up ;)

jacmoe commented 8 years ago

I changed the grey: yiisite5

Also, changed the colour of 'framework' in nav-bar - I have to think about this, I think.. ;)

It is more consistent, that's for sure.

hscstudio commented 8 years ago

yii mocakup 2 @jacmoe : You add many great improvement. and I add some added

  1. You should not repeat yii logo on main section, Yii logo enough in navbar
  2. The use of font on the main part doesn't have to be similar to font of logo. Use white color.. and font case capitalize in each word. then add shadow.. because its be focus of visitor
  3. Give more space after and before this main part.. keep visitor to focus.. and give memories impression... dont make visitor read much..
  4. Sub Title "the solid foundation for your php application" I prefer use lowercase and should not end with dot (.). see my picture..
  5. Add button in the third line.. after visitor read Yii Framework and know that "the solid foundation for your php application" .. what that he do? Yes.. he click get started..
  6. Gradation of background should with soft color in center.. because its focus.. You can see my picture

Keep "shock" in first impression.. I think You know.. what I mean FYI I use font century gothic

Thank You.. I love Yii

jacmoe commented 8 years ago

Right now, all the information the user needs to know is above the fold.

I am not a big fan of the teaser approach.

And 'PHP' should never be written in lower-case - that's just wrong! :P

I don't personally like the spotlight effect - it get's old real soon.

But, apart from that, a good idea.

Not sure if I am willing to go that route, though.

Let other people chip in. :)