Make WordPress Core

Opened 12 years ago

Closed 11 years ago

Last modified 9 years ago

#21368 closed task (blessed) (fixed)

Welcome screen design - v2

Reported by: lessbloat's profile lessbloat Owned by: ryan's profile ryan
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Help/About Keywords: has-patch
Focuses: Cc:

Description

For 3.5 we'd like to try and redesign the welcome screen - making it even more useful for users. I've mocked up a rough proposal of what I'd like to see included here: http://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/

Attachments (44)

hopscotch.zip (10.8 KB) - added by beaucollins 12 years ago.
Hopscotch plugin, demo of quick links search
21368-part1.diff (7.7 KB) - added by sabreuse 12 years ago.
Updates copy and links according to make/ui discussions
21368-part1.2.diff (8.2 KB) - added by SergeyBiryukov 12 years ago.
21368-part1.3.diff (18.9 KB) - added by lessbloat 12 years ago.
21368-part1.3.without-dev.diff (18.9 KB) - added by georgestephanis 11 years ago.
Revising the patch to apply cleanly since .dev.css files have been swapped out for plain .css and .css files have been swapped out for .min.css
21368.4.now-with-more-onclick.diff (24.3 KB) - added by georgestephanis 11 years ago.
Adding pointers in. Still need to include conditional way of only showing the step2 pointers when following a step1 pointer. Cookie perhaps?
21368.5.diff (25.3 KB) - added by lessbloat 11 years ago.
21368.6.diff (25.7 KB) - added by sabreuse 11 years ago.
21368.6.1.diff (25.7 KB) - added by sabreuse 11 years ago.
21368.7.diff (22.8 KB) - added by helenyhou 11 years ago.
21368.8.diff (22.5 KB) - added by georgestephanis 11 years ago.
21368.8.1.diff (23.0 KB) - added by georgestephanis 11 years ago.
21368.9.diff (23.1 KB) - added by lessbloat 11 years ago.
21368.10.diff (24.5 KB) - added by ryelle 11 years ago.
21368.10.refresh.diff (24.4 KB) - added by lessbloat 11 years ago.
21368.11.diff (20.6 KB) - added by lessbloat 11 years ago.
21368.12.diff (21.9 KB) - added by sabreuse 11 years ago.
21368.12.nopointers.diff (15.3 KB) - added by georgestephanis 11 years ago.
21368.13.nopointers.diff (15.3 KB) - added by lessbloat 11 years ago.
21368.14.nopointers.diff (15.3 KB) - added by helenyhou 11 years ago.
21368.15.nopointers.diff (15.3 KB) - added by lessbloat 11 years ago.
21368.16.no-customize.diff (1.6 KB) - added by DrewAPicture 11 years ago.
First-pass: Adds hide-if-no-customize to primary button
21368.16.1.no-customize.diff (1.6 KB) - added by DrewAPicture 11 years ago.
Fixes admin-header checks
21368.16.2.no-customize.diff (1.8 KB) - added by lessbloat 11 years ago.
21368.17.diff (2.2 KB) - added by lessbloat 11 years ago.
21368.18.diff (1.3 KB) - added by lessbloat 11 years ago.
21368.18.2.diff (1.6 KB) - added by lessbloat 11 years ago.
21368.18.3.diff (1.7 KB) - added by sabreuse 11 years ago.
refresh of .18.2
21368.19.diff (2.7 KB) - added by lessbloat 11 years ago.
welcome panel with icons.png (169.5 KB) - added by saltcod 11 years ago.
Welcome panel with icons
getting-started-icons.png (76.7 KB) - added by empireoflight 11 years ago.
Welcome icons in WP style
icon_add_page_32.png (1.0 KB) - added by empireoflight 11 years ago.
welcome_screen_icons.zip (1004.9 KB) - added by empireoflight 11 years ago.
psd files for icons at 16 and 32px, and sliced png files for all icons
welcome-icons.png (2.4 KB) - added by lessbloat 11 years ago.
welcome-icons-2x.png (6.8 KB) - added by lessbloat 11 years ago.
21368.20.diff (8.8 KB) - added by lessbloat 11 years ago.
21368.20-refresh.diff​ (8.1 KB) - added by lessbloat 11 years ago.
Screen Shot 2012-11-05 at 12.56.34 PM.png (107.6 KB) - added by ryan 11 years ago.
Retina icons
21368.21.diff (8.2 KB) - added by lessbloat 11 years ago.
21368-welcome-panel-css.diff (3.3 KB) - added by TobiasBg 11 years ago.
Optimize and Shorten welcome panel icon CSS
21368.diff (7.9 KB) - added by helenyhou 11 years ago.
21368.2.diff (7.8 KB) - added by helenyhou 11 years ago.
21368-20.patch (9.9 KB) - added by azaozz 11 years ago.
21368.3.diff (11.0 KB) - added by helenyhou 11 years ago.

Download all attachments as: .zip

Change History (133)

#1 @lessbloat
12 years ago

Several elements will need to be coordinated to make this project happen, including:

  • The redesign of the welcome screen - this includes the layout, copy, and front-end code - which will be discussed over on the Make/UI blog (then brought back to this ticket as a patch).
  • Adding a hook so that the welcome screen can be easily removed (see #19972)
  • Allowing plugin authors to create their own welcome screen - with their own set of links and layout (see #21331). This should also optionally enable the "viewing" drop down, as mocked up in my wireframe. Note: the "viewing" drop down should have a hook as well to enable plugin authors to disable it.
  • Saving which tab you selected (welcome, or dashboard) to the DB, and loading that tab by default on refresh.
  • Adding the “What are you trying to do” text box auto-suggest functionality. Focusing on making admin functionality easier to find.

I added these as a comment as none of these have been solidified yet. Please feel free to discuss/debate.

Last edited 12 years ago by lessbloat (previous) (diff)

#2 @ipstenu
12 years ago

  • Cc ipstenu added

#3 @sabreuse
12 years ago

  • Cc sabreuse@… added

#4 @beaucollins
12 years ago

I am attaching a plugin that provides a search interface similar to the demo I posted on make.wordpress.com/ui.

Download Hopscotch Plugin

Once activated the plugin provides access to the navigation elements int he WordPress menu in a Dashboard widget as seen in this screenshot (by default it will be the last widget on the page unless you drag it to a new position):

http://cl.ly/image/0I160R2U162s/Screen%20Shot%202012-07-30%20at%203.01.27%20PM.png

You can use the keyboard arrow keys our mouse pointer to activate items.

I have the groundwork laid for hooks/filters that allow other parties to add searchable items.

For the navigation items we want to add additional terms other than those explicitly in the menu. I think the most obvious route would be to leverage the [title] attribute on the anchor tags in the menu which currently don't have any (this also improves accessibility in general). So the "Settings -> General" navigation element could have a title attribute that reads something along the lines of:

Change your blog's title, tagline and date formats

Those terms could then be added to the search index for that navigation element.

I tested this out with the Spanish translation and it works as I expected but I'm not sure how other languages may behave (especially non-latin type).

The plugin is currently named "Hopscotch" since it's just a fork of the same web browser extension.

#5 follow-up: @lessbloat
12 years ago

@beaucollins - You've outdone yourself. This is really great. As you mentioned, the only thing that I can see needed is the ability to add additional keywords. I'm not sure stuffing them all into the title will be feasible. I'm excited to see this taking shape. :-)

#6 in reply to: ↑ 5 @beaucollins
12 years ago

Replying to lessbloat:

As you mentioned, the only thing that I can see needed is the ability to add additional keywords. I'm not sure stuffing them all into the title will be feasible.

I uploaded a new zip with this feature. After the initial indexing of the navigation it makes an ajax request for additional terms for each page. I provided a filter that then allows us to add terms for a given page. For demo purposes I added a few for different options page like this:

add_filter( 'hopscotch_navigation_terms', function( $terms ){
	
	$terms[] = array(
		'page' => 'options-general.php',
		'terms' => array( 'Site Title', 'Tagline', 'WordPress Address (URL)', 'New User Default Role' )
	);
	
	$terms[] = array(
		'page' => 'options-discussion.php',
		'terms' => array( 'Comments', 'Comment Moderation', 'Comment Blacklist' )
	);
	
	$terms[] = array(
		'page' => 'options-reading.php',
		'terms' => array( 'Front page displays', 'Encoding for pages and feeds' )
	);
		
	return $terms;
	
} );

The filter will automatically pass these terms through the i18n functions so if a translation already exists for the given term it will use it. I pulled these terms from the corresponding options pages. So, as an example, the JSON for an 'es_ES' configured blog will output:

{
    "options-discussion.php": [
        "Comentarios", 
        "Moderaci\u00f3n de comentarios", 
        "Lista negra de comentarios"
    ], 
    "options-general.php": [
        "T\u00edtulo del sitio", 
        "Descripci\u00f3n corta", 
        "Direcci\u00f3n de WordPress (URL)", 
        "Perfil predeterminado para nuevos usuarios"
    ], 
    "options-reading.php": [
        "La p\u00e1gina inicial mostrar\u00e1", 
        "Codificaci\u00f3n para p\u00e1ginas y feeds"
    ]
}

And they additional terms work for the given page:

http://cl.ly/image/2n3D0Z1O2Z3C/Screen%20Shot%202012-07-31%20at%2011.07.34%20AM.png

@beaucollins
12 years ago

Hopscotch plugin, demo of quick links search

#7 @bootsz
12 years ago

  • Cc bootsz added

#8 @DrewAPicture
12 years ago

  • Cc xoodrew@… added

Take the example search of 'media' above. Would users (who maybe aren't familiar with the lingo yet) be able to search for things like 'image', 'video' or 'audio' and still get directed to the Media Library or Add New Media?

#10 @lessbloat
12 years ago

As an update, we've decided to leave search out for 3.5, and to focus on simply improving the existing welcome screen copy and links. Here's the latest mockup.

@sabreuse
12 years ago

Updates copy and links according to make/ui discussions

#11 @sabreuse
12 years ago

attachment:21368-part1.diff updates copy and links according to the discussions here and at http://make.wordpress.org/ui/2012/07/24/welcome-screen-design-v2/. Still to come are the walk-through admin pointers and hooks.

This could also use a bit of restyling: without the big badge and longer large-type intro, the panel looks pretty sparse. I think we can afford to bump up the font size a notch or two, since this panel is meant to stand out for users who aren't familiar with the interface.

#12 @SergeyBiryukov
12 years ago

21368-part1.2.diff:

  • Adds missing i18n for "Customize Your Site" string
  • Separates the tags from the translated strings
  • Replaces echo sprintf() with printf()
  • Fixes "Add media" link (post-new.php vs. media-new.php)
  • Removes .about-description styles from wp-admin-rtl.dev.css as well
Last edited 12 years ago by SergeyBiryukov (previous) (diff)

#13 @lessbloat
12 years ago

21368-part1.3.diff is my first attempt at adding some styles. Have a look:

http://f.cl.ly/items/38332f1t2B1G0a2I161K/welcome-screen-styles-v1.jpg

I'm still unsure about the background color, but I felt like without it, the content wasn't framed very well.

Thoughts?

#14 @sabreuse
12 years ago

Looking good - I agree about the need for some kind of framing: after removing some of the larger elements from the original welcome panel, it felt like the content was floating without any real focus.

@georgestephanis
11 years ago

Revising the patch to apply cleanly since .dev.css files have been swapped out for plain .css and .css files have been swapped out for .min.css

@georgestephanis
11 years ago

Adding pointers in. Still need to include conditional way of only showing the step2 pointers when following a step1 pointer. Cookie perhaps?

#15 @georgestephanis
11 years ago

21368.4.now-with-more-onclick.diff

Adding pointers in. Still need to include conditional way of only showing the step2 pointers when following a step1 pointer. Cookie perhaps?

@lessbloat
11 years ago

#16 @lessbloat
11 years ago

In 21368.5.diff:

  • Changed "Add additional pages" and "Add an About page" to point to post-new.php?post_type=page (so the user doesn't need to click twice to get to where they want to go).
  • Changed "Add a blog post", and "Write your first blog post" to point to post-new.php.
  • Changed "Check out your site" link copy to "View your site".
  • Added "or, change your theme completely" under big button, and removed step 1 of admin pointers for this link.
  • Changed "change theme" link in right column to "Add/remove widgets" and added a pointers.
  • Changed z-index of left nav sub menus to show up over top of admin pointers.

@sabreuse
11 years ago

@sabreuse
11 years ago

#17 @sabreuse
11 years ago

In 21368.6.1.diff:

  • Add a cap check for install_themes to the "optionally, install a new theme" pointer
  • Hide the change your theme link in the case that the user has only one theme installed and doesn't have privileges to install new ones
  • Make the "or," in "or, change your theme" translatable

@helenyhou
11 years ago

#18 @helenyhou
11 years ago

  • Keywords has-patch added
  • Milestone changed from Awaiting Review to 3.5

21368.7.diff changes the cap check for the "change your theme" link to be a little more thorough (tested with various users and theme numbers in multisite) and does a good bit of CSS cleanup. Also, a thought about the change theme pointer - seems to me it might make sense to name it install theme instead, since that's where it really points.

Edit: Darn. Forgot to take the media query block out of one of the colors CSS files. Next iteration should remove that, please. :)

Last edited 11 years ago by helenyhou (previous) (diff)

#19 follow-up: @georgestephanis
11 years ago

Latest revision removes the install_theme capability check, as that tooltip shouldn't show in a walkthrough, as the link kicking it off got removed! Also removed the relevant function, etc.

Added in a get variable appender for the links we care about. This way we can only show the step 2 tooltip when following a click on the link from the previous page. No cookies needed!

Also made a minor change in verbiage as requested by Koop (element becomes link)

Koop requested changing setup to use e.preventDefault() rather than return false -- I tried it, but it won't work, as the same function also needs to run on pageload, and that generates a script error in practice. Has to return false to prevent the link from going, either that or some convoluted test for if e is an event then preventDefault()-ing.

Also removed the media block from colors-fresh as per Helen.

#20 @georgestephanis
11 years ago

Put the theme pointer back in and tidied up the code for it.

#21 in reply to: ↑ 19 @azaozz
11 years ago

Replying to georgestephanis:

Koop requested changing setup to use e.preventDefault() rather than return false -- I tried it, but it won't work...

Changing the href attribute of an <a> tag always "triggers" the link. Also it shouldn't use html entities from JS in -1 == href.indexOf('?') ? '?' : '&amp;', the browsers handle that internally.

Wondering if there is another way of doing this without changing the link's href.

#22 @lessbloat
11 years ago

RE: adding hooks - quote from helenyhou today in ticket scrub, "and i'm pretty sure there will only really be two hooks - disabling the panel completely (like not even having it in screen options), and one for the entire inner HTML output".

@lessbloat
11 years ago

#23 @lessbloat
11 years ago

In 21368.9.diff I made a couple of minor CSS (padding, font-size) tweaks. Also changed "Add media" link to "Add image/media".

#24 @ryelle
11 years ago

Adding a hook using nacin's idea from #21331:

do_action( 'welcome_panel' );


And in default-filters:


add_action( 'welcome_panel', 'wp_welcome_panel' );

@ryelle
11 years ago

#25 follow-up: @lessbloat
11 years ago

This ship is just about ready to set sail. Any last minute thoughts on design improvements?

http://f.cl.ly/items/211C0f3C0B3E3u2X2O3Q/dashboard-welcome-screen.jpg

Last edited 11 years ago by lessbloat (previous) (diff)

#26 in reply to: ↑ 25 ; follow-up: @helenyhou
11 years ago

Replying to lessbloat:

This ship is just about ready to set sail. Any last minute thoughts on design improvements?

We can still make design tweaks for some time yet. Just need it to be functioning and somewhere close to a look.

#27 in reply to: ↑ 26 @lessbloat
11 years ago

Replying to helenyhou:

We can still make design tweaks for some time yet.

Sorry, I should have said. Everything is in except for any remaining design tweaks. :-)

#28 @JerrySarcastic
11 years ago

  • Cc fittingsites@… added

One minor change: "Learn how to:" should probably be changed to "Learn How To:"

The word "Learn" might even be a bit redundant, so we could even shorten it to just "How To:" instead, and it works just fine.

#29 @nacin
11 years ago

  • Type changed from enhancement to task (blessed)

#30 @lessbloat
11 years ago

21368.10.refresh.diff resolves a conflict in dashboard.php.

Last edited 11 years ago by lessbloat (previous) (diff)

#31 @helenyhou
11 years ago

Would like to see the following:

  • The button to use new built-in button gradients and just resize accordingly
  • Everything added to the welcome_panel action to be inside the wrapper markup (a couple of divs plus the dismiss link, I believe). Will probably need to do some has_action() checking there to conditionally output the wrapper, much like the screen options checkbox.

#32 @melchoyce
11 years ago

  • Cc melissachoyce@… added

@lessbloat
11 years ago

#33 @lessbloat
11 years ago

Removed custom button styles in 21368.11.diff. The big blue button now mostly defaults to the new button styles.

@sabreuse
11 years ago

#34 @sabreuse
11 years ago

21368.12.diff does the following:

  • conditionally outputs the wrapper and Dismiss button based on a has_action()
  • free gift with purchase - removes the version variable that we're no longer using for "Welcome to WordPress 3.5"

#35 @helenyhou
11 years ago

Tested removing the panel, replacing, and adding to it. Works nicely :)

#36 @helenyhou
11 years ago

  • Keywords commit added

21368.12.nopointers.diff looks good for a first run.

#37 @lessbloat
11 years ago

One last tweak needed. After you click the "Customize your site" button, when you click the "cancel" button in the customizer, it should take you back to your dashboard. Other than that, it looks good to me too.

#38 @lessbloat
11 years ago

21368.13.nopointers.diff fixes comment:37.

#39 @helenyhou
11 years ago

Looks good. 21368.14.nopointers.diff removes one more reference to a pointer in a URL.

#40 @nacin
11 years ago

In [22018]:

New design and content for the welcome panel. First pass.

props lessbloat, helenyhou, georgestephanis, sabreuse, ryelle.
see #21368.

#41 @azaozz
11 years ago

In [22028]:

Too much z-index on the admin submenus, see #21368

@DrewAPicture
11 years ago

First-pass: Adds hide-if-no-customize to primary button

@DrewAPicture
11 years ago

Fixes admin-header checks

#42 @DrewAPicture
11 years ago

  • Keywords needs-ui added

It occurs to me that we need to hide the Customize button on the Welcome panel if it's not supported (such as no-js). 21368.16.1.no-customize.diff is a first pass at hiding the button with the hide-if-no-customize class, although I'm sure the UI folks will want to find a way to more gracefully degrade that section.

On a side note: As far as I can tell, the no-customize-support body class is set in admin-header by default and adjusted after the fact by wp_customize_support_script(), which hide-if-no-customize relies on. So I also adjusted the check in admin-header.php.

#43 @lessbloat
11 years ago

I'm not sure we can just remove the customizer button itself. Doing so leaves the "First, tweak the look of your site:" text which no longer really applies. In 21368.16.2.no-customize.diff I moved the .hide-if-no-customize class up to the parent .welcome-panel-column div which removes the entire first column when .no-customize-support is set. But that leaves a pretty noticeable gap to the right which isn't great.

@lessbloat
11 years ago

#44 @lessbloat
11 years ago

Instead of hiding the "Customize Your Site" button, 21368.17.diff changes the link to point to the themes page, and removes the "or, change your theme completely" line below the button when .no-customize-support is set.

@lessbloat
11 years ago

#45 @nacin
11 years ago

I missed it in [22018], but there is a better API we can use here. With the customize loader script properly loaded and implemented, we can allow the customizer to open as an overlay over the page, rather than requiring it to open to customize.php. Also, rather than rewriting the link, we can simply print two different buttons — one if customize is enabled, one when it isn't.

#46 @nacin
11 years ago

In [22089]:

Provide no-customize fallback to the welcome screen. Use the customize overlay rather than a page reload. see #21368.

#47 @lessbloat
11 years ago

Removed the "First, tweak the look of your site:" line in 21368.18.diff which makes all 3 columns the same height:

http://f.cl.ly/items/0v0F0T2N340w2Z241X1n/welcome-less.jpg

#48 @lessbloat
11 years ago

Decreased font-size of header and sub-header in 21368.18.2.diff:

http://f.cl.ly/items/3K1E1C3p162H2m3a2S3S/welcome-header-size.jpg

#49 @nacin
11 years ago

The third column, "Learn How To," doesn't make much sense when there are no pointers. I'm not suggesting we add the pointers back in (they are clever, but the workflow and pointers UI seems half-baked for this), but rather, we need to revisit our content.

I think good places to start would be looking at the original welcome panel and also studying the Codex links that got removed with v2.

@sabreuse
11 years ago

refresh of .18.2

#50 @sabreuse
11 years ago

21368.18.3.diff is a refresh after .2 gave me a hunk failed

#51 @helenyhou
11 years ago

  • Component changed from General to Help/About
  • Keywords commit needs-ui removed

@lessbloat
11 years ago

#52 @lessbloat
11 years ago

In 21368.19.diff made updates to links and header in right column per Nacin's comment above and our discussion in IRC

@saltcod
11 years ago

Welcome panel with icons

#53 follow-up: @saltcod
11 years ago

I mentioned using icons in the IRC chat early today. I thought I'd just post a very quick mockup of what I was talking about to get some reaction before I do any coding.

The column headings don't reflect what was talked about today, and obviously the icons would need to be meaningful (and GPL), etc, etc...but it shows the main sentiment at least.

http://f.cl.ly/items/07281r152t2r2p2A2U3V/Screen%20shot%202012-10-02%20at%205.07.36%20PM.png

Last edited 11 years ago by saltcod (previous) (diff)

#54 @saltcod
11 years ago

  • Cc saltcod added

#55 @JerrySarcastic
11 years ago

That looks quite nice, actually. +1

#56 follow-ups: @melchoyce
11 years ago

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.) In addition to the resources helenyhou mentioned, you can search http://www.iconfinder.com/ and specify "allowed for commercial use (no link required)" to find some icons/icon sets. Each set should have an attached license which will let you know if it's okay to use. Alternately, you can look for public domain and non-attribution icons on http://thenounproject.com/. If you end up not finding any icons you like, let me know. I'd be happy to design some for this specifically.

@sabreuse mentioned in chat bringing in some of the admin icons, which I think is a good solution to help tie together each link with its action. We have icons for post, page, comments, and appearance, so we'd just need to make a "view" and "learn more" icon that matches the admin style, if we decide to go in that direction.

Last edited 11 years ago by melchoyce (previous) (diff)

#57 in reply to: ↑ 56 @nacin
11 years ago

Replying to melchoyce:

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.)

Only CC0 is compatible with the GPL.

I think we would ask empireoflight (Ben Dunkle) or chexee to make icons for us, though. So, if we are to do icons, they would be custom and these are only placeholders.

#58 in reply to: ↑ 53 @lessbloat
11 years ago

Replying to saltcod:

I mentioned using icons

I like it. My thoughts:

  • I'll ping Ben Dunkle to see if he's interested
  • Let's try and keep these icons flat (minus gradients and shadows)
  • I'd remove the border-bottom under the third row or both the second and the third column (just a personal preference).

#59 @lessbloat
11 years ago

Just making a note of the new links in 21368.19.diff. Here are the links:

http://f.cl.ly/items/0f092F3i0C0q3t2g0a2A/dash.jpg

#60 @empireoflight
11 years ago

No prob, I'll hook it up with some icons, I'm thinking the standard WP style, like in the left column? Or do we want them simple and flat?
I'm assuming we need 16x16 and 32x32 (2x) sizes...please advise if there's flexibility there, since 16x16 can be tough.

#61 in reply to: ↑ 56 ; follow-up: @empireoflight
11 years ago

Sorry, just reading this; ignore my post about icon style; we'll do the WP style.
So we just need view and learn more then?

Replying to melchoyce:

Loving the use of icons, @saltcod -- it definitely makes the Welcome Screen a little friendlier.

@saltcod, you asked on UI chat about GPL icon sets. I'm a little fuzzy on the image copyright version of GPL, but I think either public domain or CC non-attribution should be okay. (If someone knows for sure how this works, please let me know.) In addition to the resources helenyhou mentioned, you can search http://www.iconfinder.com/ and specify "allowed for commercial use (no link required)" to find some icons/icon sets. Each set should have an attached license which will let you know if it's okay to use. Alternately, you can look for public domain and non-attribution icons on http://thenounproject.com/. If you end up not finding any icons you like, let me know. I'd be happy to design some for this specifically.

@sabreuse mentioned in chat bringing in some of the admin icons, which I think is a good solution to help tie together each link with its action. We have icons for post, page, comments, and appearance, so we'd just need to make a "view" and "learn more" icon that matches the admin style, if we decide to go in that direction.

#62 in reply to: ↑ 61 ; follow-up: @melchoyce
11 years ago

Replying to nacin:

Only CC0 is compatible with the GPL.

Good to know, thanks for the copyright clarification @nacin. Would public domain also be acceptable, or just CC0?

@lessbloat, is the "next steps" column still changing depending upon if the site is set to a blog frontpage or a static frontpage?

Replying to empireoflight:

Sorry, just reading this; ignore my post about icon style; we'll do the WP style.

Looks like @lessbloat is recommending we actually do make them flat. @lessbloat, were you thinking we would use new flat icons, or making the existing icons flat?

#63 in reply to: ↑ 62 ; follow-up: @nacin
11 years ago

Replying to melchoyce:

Good to know, thanks for the copyright clarification @nacin. Would public domain also be acceptable, or just CC0?

A public domain work is GPL compatible. CC0 is preferred because it is an actual license, defines what "public domain" means, and offers a permissive fallback. http://www.gnu.org/licenses/license-list.html

@empireoflight
11 years ago

Welcome icons in WP style

#64 follow-up: @empireoflight
11 years ago

Just posted designs. Are these the links that will appear?
Did two for "View your site".
I have no clue what to do for "Manage widgets and Menus"--suggestions?

#65 in reply to: ↑ 64 @lessbloat
11 years ago

Replying to empireoflight:

Just posted designs.

Awesome. Thank you!

Are these the links that will appear?

They are. This looks great.

Did two for "View your site".

Although the "eye" one stands out more, personally, I'd go with the non-eye one.

I have no clue what to do for "Manage widgets and Menus"--suggestions?

Here's one quick idea (don't feel like you have to roll with it though):

http://f.cl.ly/items/0L0D3l1Y1U2A2K0Y1k1k/widget-menu.jpg

One last thing, I'm sure you're already on it, but can you please add 2x images for each of these :-)

Thanks so much Ben!

Last edited 11 years ago by lessbloat (previous) (diff)

#66 in reply to: ↑ 63 @melchoyce
11 years ago

Replying to empireoflight:

Did two for "View your site".

These look great! I agree with @lessbloat -- I think the first "view your site" icons works better than the eye overall.

Replying to nacin:

A public domain work is GPL compatible. CC0 is preferred because it is an actual license, defines what "public domain" means, and offers a permissive fallback. http://www.gnu.org/licenses/license-list.html

Thanks for the clarification.

#67 @nayarain
11 years ago

I like icons, they break up the different links for the eye, delineating between tasks. I like @empireoflight icons they feel more wordpressy (I'm making that a word)

#68 follow-up: @lessbloat
11 years ago

There's some discussion taking place over here: http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/

@empireoflight, 2 things I noticed:

1) Sorry I missed one. When you select a static front page, with a blog page, another link shows up (Add a blog post). I attempted to hack in the existing posts icon:

http://f.cl.ly/items/182u0a1s253W1d3k2U0q/add_a_blog_post.jpg

But I'm not sure it works - seems a bit light compared to the others.

2) The "Manage widgets and menus" icon looks a tad off to me compared to the others:

http://make.wordpress.org/ui/files/2012/10/welcome-icons-padding2.jpg

I'm not sure if it's the size, or perhaps the dark strip at the top (where the other icons don't have any major dark sections). What do you think?

#69 in reply to: ↑ 68 ; follow-up: @empireoflight
11 years ago

Good points; I'll get new tack and widget icons done asap.

Replying to lessbloat:

There's some discussion taking place over here: http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/

@empireoflight, 2 things I noticed:

1) Sorry I missed one. When you select a static front page, with a blog page, another link shows up (Add a blog post). I attempted to hack in the existing posts icon:

http://f.cl.ly/items/182u0a1s253W1d3k2U0q/add_a_blog_post.jpg

But I'm not sure it works - seems a bit light compared to the others.

2) The "Manage widgets and menus" icon looks a tad off to me compared to the others:

http://make.wordpress.org/ui/files/2012/10/welcome-icons-padding2.jpg

I'm not sure if it's the size, or perhaps the dark strip at the top (where the other icons don't have any major dark sections). What do you think?

#70 in reply to: ↑ 69 @lessbloat
11 years ago

Replying to empireoflight:

Good points; I'll get new tack and widget icons done asap.

@empireoflight: A possible alternative to the widgets/menus icon: http://make.wordpress.org/ui/2012/10/11/we-need-your-help-deciding-what-to-do/#comment-22462

@empireoflight
11 years ago

psd files for icons at 16 and 32px, and sliced png files for all icons

#71 follow-up: @empireoflight
11 years ago

Icons have been updated with a darker pin and a smaller widget. Preview without the new link styles:
http://i.imgur.com/nYOLj.png

#72 in reply to: ↑ 71 @lessbloat
11 years ago

Replying to empireoflight:

Icons have been updated with a darker pin and a smaller widget.

Fantastic. Thanks for that! I'll work on an updated patch in the AM.

@lessbloat
11 years ago

#73 @lessbloat
11 years ago

I combined 21368.19.diff and @empireoflight's icons (including 2x images) into 21368.20.diff. Here's what it looks like:

http://f.cl.ly/items/0b1e3S0O0v3Z360g2b1V/welcome-screen-demo.jpg

#74 follow-up: @ryan
11 years ago

wp-admin.css needs refresh.

#75 in reply to: ↑ 74 @lessbloat
11 years ago

Replying to ryan:

wp-admin.css needs refresh.

21368.20-refresh.diff should do the trick.

#76 @ryan
11 years ago

Icons are off on a MacBook Retina but fine on non-retina.

@lessbloat
11 years ago

#77 @lessbloat
11 years ago

Replying to ryan:

Icons are off on a MacBook Retina but fine on non-retina.

Thanks for catching that. 21368.21.diff should provide a fix.

#78 @ryan
11 years ago

  • Owner set to ryan
  • Resolution set to fixed
  • Status changed from new to closed

In 22379:

Welcome screen refresh. Now with icons. Props lessbloat, empireoflight. fixes #21368

#79 follow-up: @TobiasBg
11 years ago

  • Resolution fixed deleted
  • Status changed from closed to reopened

I'd like to suggest that we shorten and optimize the welcome panel icon CSS a little bit. Patch 21368-welcome-panel-css.diff shortens the sprite CSS for regular and Hi-DPI.

@TobiasBg
11 years ago

Optimize and Shorten welcome panel icon CSS

#80 in reply to: ↑ 79 @azaozz
11 years ago

Replying to TobiasBg:

Thanks for the patch, we were just talking about this yesterday in IRC. The only thing missing is the RTL.

#81 @TobiasBg
11 years ago

No problem :-) RTL for the welcome screen is being worked on in #22453, as far as I can see.

@helenyhou
11 years ago

#82 @helenyhou
11 years ago

Think we can simplify even better with an added class: 21368.diff

#83 @helenyhou
11 years ago

21368.2.diff is a refresh after [22629] and [22634].

Last edited 11 years ago by helenyhou (previous) (diff)

@helenyhou
11 years ago

#84 @lessbloat
11 years ago

+1 to 21368.2.diff​. Looks good.

@azaozz
11 years ago

#85 @azaozz
11 years ago

In 21368-20.patch added RTL and a fix for the Dismiss icon. Also had to tweak the vertical position of the icons a bit. Could you see if that's better?

@helenyhou
11 years ago

#86 @helenyhou
11 years ago

Needed a bit more for RTL: 21368.3.diff. Probably should acknowledge ocean90's patch over on #22453 as well. Let's finish this off to stop the confusion :)

#87 @azaozz
11 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

Fixed in [22638].

#88 @helenyhou
11 years ago

New tickets from now on, please.

This ticket was mentioned in Slack in #core-flow by georgestephanis. View the logs.


9 years ago

Note: See TracTickets for help on using tickets.