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

3.0: New design for generated files. #6679

Closed
midorikocak opened this Issue May 29, 2015 · 62 comments

Comments

Projects
None yet
@midorikocak
Copy link

midorikocak commented May 29, 2015

Currently the design for generated views looks ugly not feels ready to use. I can write schemas ready for foundation with the ready designs I use at my commercial projects.

If you have some other ideas about this please tell.
screen shot 2015-05-29 at 20 40 48

@dakota

This comment has been minimized.

Copy link
Member

dakota commented May 29, 2015

I quite like the default bake layout. It's clean and simple. It's not meant to be used for production.

That said, it is very simple to create custom a bake theme that you can release open source.

@markstory markstory added this to the 3.1.0 milestone May 29, 2015

@markstory

This comment has been minimized.

Copy link
Member

markstory commented May 29, 2015

If we can get an improved layout, that is even better, I would be 👍 for it. The last attempt at this didn't go super well because the resulting HTML and CSS was looking like it was going to be challenging/complex to maintain.

I think any new styles for bake need to strike a balance between visually pleasing and simple enough that it isn't daunting for new developers to grok or difficult to maintain.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 29, 2015

Let's start with concepts. Define them and design comes after. I am doing a little research about it now.
What are common elements, what is needed for optimization. (for now foundation is used right? so it should be responsive) Common elements could be something like navigation or footers etc. Also, what people's opinion? Are easier to use, accessible? Despite looking ugly and having hospital surgery room colors, In my opinion they are a little difficult to hack too.
Do we have any statistics about how people use cakephp views, any specific audience etc? I am thinking also to pay attention some of usability principles for screen readers etc.

I am willing to work on this now and I can create some alternatives... (by the way I started to study design as second major :) I finished my first semester today)

@dakota

This comment has been minimized.

Copy link
Member

dakota commented May 29, 2015

It seems like you've got some ideas floating around in your head (And based on your screenshot, in code already). May I suggest creating a bake theme (http://book.cakephp.org/3.0/en/bake/development.html#creating-a-bake-theme) and linking to it here.

I'm quite a fan of the hospital colour scheme, but I'm open to improvements :)

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 29, 2015

@dakota thank you for your encouraging comments! I already know how to create a bake and I create bake themes for a long time. You can check them at: https://github.com/mtkocak/Cakephp-Bootstrappifier https://github.com/mtkocak/bootstrap2cake

Here I recommend to brainstorm all together, instead of hard coding everything by myself and pulling it. I think first way is more appropriate. Do you have any ideas to add? If not, thank you for your advices.

@markstory

This comment has been minimized.

Copy link
Member

markstory commented May 29, 2015

The current colors come from the CakePHP brand palette which is where they originally came from.

I don't think we have much data on who/how uses the baked views. My hunch is that they are only used for admin facing UI's or temporarily as people are in the early stages of application development. However, I have no data to back any of those assumptions up.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 29, 2015

Current design screenshots.
view.ctp 1280x1024
hnsgjnsc5taaaaabjru5erkjggg
edit.ctp 1024x768
8ftotrwwakxawaaaaasuvork5cyii
view.ctp 1024x768
xc203xyakk2vqaaaabjru5erkjggg
add.ctp 1024x768
gxgaeeeeaaaqqqqaabbbbaaaeeeeaaaqqqqaabbbbyawecurntmohcifhyjaaccccaaaiiiiaaaggggaaccccaaaiiiiaaagisgqcb3ik2 b8bzal40zv8yzmaaaaasuvork5cyii
index.ctp 1024x768
hxg5tyownhniaaaaaelftksuqmcc

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

problems at first sight:

  1. Paddings, margins are not equal
  2. There is not a grid on the design.
  3. Elements are distributed
  4. No information hierarchy at all
  5. Actions Sidebar header is unnecessary
@bravo-kernel

This comment has been minimized.

Copy link
Contributor

bravo-kernel commented May 30, 2015

👍 for the initiative

@ionas

This comment has been minimized.

Copy link
Contributor

ionas commented May 30, 2015

Here are some shots from the old initiative to add some inspiration maybe:

screen shot 2014-09-29 at 10 10 41
screen shot 2014-09-29 at 10 10 56
screen shot 2014-09-29 at 10 12 12
screen shot 2014-09-29 at 10 12 39
screen shot 2014-09-29 at 10 14 12
screen shot 2014-09-29 at 10 14 15
screen shot 2014-09-29 at 10 14 38
screen shot 2014-09-29 at 10 14 46
screen shot 2014-09-29 at 10 15 22
screen shot 2014-09-29 at 10 26 49
screen shot 2014-09-29 at 10 27 18
screen shot 2014-09-29 at 10 27 47
screen shot 2014-09-29 at 10 27 52
screen shot 2014-09-29 at 10 27 58
screen shot 2014-09-29 at 10 32 45
screen shot 2014-09-29 at 10 33 50
screen shot 2014-09-29 at 10 34 14
screen shot 2014-09-29 at 10 48 28
screen shot 2014-09-29 at 10 48 38
screen shot 2014-09-29 at 10 48 41

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

@ionas valuable experience

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

@markstory is there any official brand identity guideline?

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

current color scheme extracted from cake.css
29aginubzbzeaaqiecbagqiaaaqiecbagqiaaaqiecbagqiaaaqiecbagqibapqicqpxkmueaaaecbagqiecaaaecbagqiecaaaecbagqiecaaaecbagqiecgaqt fz25maxhbq1maaaaaelftksuqmcc

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

Colors extracted from logo wallpaper
screen shot 2015-05-30 at 10 43 06

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

Official logo colors.

screen shot 2015-05-30 at 10 52 56

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

adequate completemntary colors generated by paletton.com
img
screen shot 2015-05-30 at 10 56 52
http://paletton.com/#uid=33k0u0krEtvhbBXmbv9uanOyPiP

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

Shades with color codes

screen shot 2015-05-30 at 11 00 15

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

@midorikocak

This comment has been minimized.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

current color scheme and text fails almost each case according to http://www.w3.org/TR/WCAG20/

screen shot 2015-05-30 at 11 17 16
screen shot 2015-05-30 at 11 15 34
screen shot 2015-05-30 at 11 14 43

anlysis made using: http://www.paciellogroup.com/resources/contrastanalyser/

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

text color for secondary color 1

screen shot 2015-05-30 at 11 26 44

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

advised color for white text based on secondary color 2
screen shot 2015-05-30 at 11 28 02

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

draft palette examples optimized for WACG2

palette-2
palette-1

@markstory

This comment has been minimized.

Copy link
Member

markstory commented May 30, 2015

is there any official brand identity guideline?

Not really. We've not really needed one as very few people have ever taken an interest in the visual design aspects of the project. I like the where the palette is going in these screenshots.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

Current status (Should analyze colours again) What do you say?

l1hzy7 qq5jlaaaaaelftksuqmcc

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented May 30, 2015

Second Working Alternative
gxgaeeeeaagduwibiw2vxj6hfaaaeeeeaaaqqqqaabbbbaaaeeeeaagssjqdbgqvitdfikj8uiiiaaagistgdbgnwuh1epaaiiiiaaaggggaaccccaaaiiiiaaaghcgqgcauuv v8aewmzzo08rhmaaaaasuvork5cyii

@htstudios

This comment has been minimized.

Copy link
Contributor

htstudios commented May 30, 2015

I do think a lot more peeps that don't even are in gh use it for admin panels of smaller apps!

@josegonzalez

This comment has been minimized.

Copy link
Member

josegonzalez commented May 30, 2015

I'm +1 on the changes, they look great and make the new bake templates look a lot more modern while still keeping our look and feel.

@classoutfit

This comment has been minimized.

Copy link

classoutfit commented May 31, 2015

Sounds shallow I know, but the first thing newcomers do is bake something and see how it looks/feels. So even if they are not used in anger, this is important for onboarding new fans. I also like this; #6679 (comment)

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 1, 2015

I have to update colors for accessibility again and I am going to propose those as official brand colors. If I find sometime I could also create brand identity guidelines for future designs created by other people.

what do you say people? by the way, who is designing the front page of cakephp.org? The design is very funny and good looking. Maybe he or she could cooperate about this.

@markstory

This comment has been minimized.

Copy link
Member

markstory commented Jun 1, 2015

@mtkocak Having the palette/guidelines you used would be great so we can re-use it any future work. The designs for the current homepage were done by a designer @phpnut hired. He probably has contact details.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 1, 2015

hmm. but we cannot demand volunteer work from him I think. I can move on alone. I did not want to crush someone else's work, but if was professional it was ok.

@markstory

This comment has been minimized.

Copy link
Member

markstory commented Jun 1, 2015

Fair point, I don't think there will be any overlap with existing work then. If the bake output and websites vary a bit I think that's ok and possibly good, as they are separate entities.

@ionas

This comment has been minimized.

Copy link
Contributor

ionas commented Jun 1, 2015

I don't think this should be a blocker. I do think that next time a cakephp.org overhaul comes around I'd love to see the use of one constant color palette/corporate identity.

@classoutfit I think you are on spot!

@mtkocak how would #6679 (comment) look with a text data field? What about responsive? Will you keep the underlying DOM soup?
Then the yellow headers on white background are too much. Also to my taste a little too many colors.

How would form errors look like? What about error pages?

That aside I like both themes, the muted and colorful. Great work.

@phpnut

This comment has been minimized.

Copy link
Member

phpnut commented Jun 1, 2015

@mtkocak as mark said I hired someone to redesign the site. The redesign is planned to be used on all of the CakePHP assets (other sites). All of the work you have shown above is very impressive and you have a +1 vote from me. Great contribution!

@look4raymond

This comment has been minimized.

Copy link

look4raymond commented Jun 9, 2015

Coming from a graphic design background & looking for my 1st PHP MVC framework, I was contemplating between Yii and CakePHP. I eventually went with Yii as the generated templates were more visually appealing and semantic. I didn't really dig on CakePHP's generated templates, it just feels half-baked. No offense to the designer, it's just a personal opinion.

@mtkocak is doing a really great work! ❤️

Some of us freelancers are in a hurry to finish up projects, so an excellent baked templates help a lot in that we can just do very minimal tweaking and serve it to clients. Maybe someday when CakePHP or the community has produced these, I'll revisit CakePHP.

FWIW, I tried to produce my own bake templates but the codes just make me 😲 .

@ionas

This comment has been minimized.

Copy link
Contributor

ionas commented Jun 9, 2015

@look4raymond I can totally feel your pain. It is exactly the reason I did try to push a semantic, responsive ergonomic basic bake look.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 9, 2015

new layout is going to be totally responsive without any div soup. just can't find time to write tests. Any volunteers?

@AD7six

This comment has been minimized.

Copy link
Member

AD7six commented Jun 9, 2015

@mtkocak do you mean for cakephp/bake#104, did you see my comment there ?

@jadb

This comment has been minimized.

Copy link
Member

jadb commented Jun 9, 2015

I haven't looked at the exact palette used in the new PRs you submitted @mtkocak but I like how the #6679 (comment) looks like. Not a fan of the yellow sidebar in the other one.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 9, 2015

test are OK.

cakephp/bake#104
cakephp/app#252

Please check for merge.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 10, 2015

Proud of merged requests. Future opts would be:

  • Deeper color analysis
  • Alternative color scheme
  • Accessibility tests
  • etc?
@ionas

This comment has been minimized.

Copy link
Contributor

ionas commented Jun 10, 2015

Aside my comments in the PRs:

  • I did not check responsive behavior, I think that's important (also for the side bar menu as a top menu)
  • Accessibility (tab index, screen readers, etc) is a nice thing too (I like if things are done right as this is not only a foundation for RAD but also a basis to learn from for many).
  • If the colors and margins/paddings/grid looks like on the shots, I think its great!
@markstory

This comment has been minimized.

Copy link
Member

markstory commented Jun 11, 2015

Going to close this as the changes for both the app & bake have been merged. If there is interest in refining the new templates further we can do that in separate issues 😄

@markstory markstory closed this Jun 11, 2015

@davidyell

This comment has been minimized.

Copy link
Contributor

davidyell commented Jun 23, 2015

Having just found this thread from the other Bake theme threads, please can we link to the merged PR here so that people can follow the thread.

Otherwise this all looks great. Not too over complex which is nice.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 23, 2015

I will analyze again and update colors sometime in the future.

@AD7six

This comment has been minimized.

Copy link
Member

AD7six commented Jun 23, 2015

@davidyell You only need to put a link to whatever in your comment

e.g.:

screenshot from 2015-06-23 12 52 28

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 26, 2015

By the way, how can I install 3.1 version? @markstory sorry about asking here.

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 26, 2015

after changing composer.json to

"require": {
    "php": ">=5.4.16",
    "cakephp/cakephp": "~3.1",
    "mobiledetect/mobiledetectlib": "2.*",
    "cakephp/migrations": "~1.0",
    "cakephp/plugin-installer": "*"
},
"require-dev": {
    "psy/psysh": "@stable",
    "cakephp/debug_kit": "~3.0",
    "cakephp/bake": "~1.1"
},

I have this:

Midori-MacBook-Pro:universale mtkocak$ composer update
Loading composer repositories with package information
Updating dependencies (including require-dev)
Your requirements could not be resolved to an installable set of packages.

Problem 1
- Installation request for cakephp/cakephp ~3.1 -> satisfiable by cakephp/cakephp[3.1.x-dev].
- cakephp/bake 1.1.x-dev requires cakephp/cakephp dev-master -> satisfiable by cakephp/cakephp[dev-master].
- Can only install one of: cakephp/cakephp[dev-master, 3.1.x-dev].
- Installation request for cakephp/bake ~1.1 -> satisfiable by cakephp/bake[1.1.x-dev].

Midori-MacBook-Pro:universale mtkocak$

@midorikocak

This comment has been minimized.

Copy link
Author

midorikocak commented Jun 26, 2015

I did something like composer create-project --prefer-source cakephp/app universale 3.1.x-dev hope it's gonna work.

@markstory

This comment has been minimized.

Copy link
Member

markstory commented Jun 26, 2015

You'll have to set the minimum-stability to dev as well in composer.json. And use the various dev branches.

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