WordPress.org

Make WordPress Core

Opened 21 months ago

Closed 17 months ago

Last modified 17 months ago

#21368 closed task (blessed) (fixed)

Welcome screen design - v2

Reported by: lessbloat Owned by: 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 21 months ago.
Hopscotch plugin, demo of quick links search
21368-part1.diff (7.7 KB) - added by sabreuse 20 months ago.
Updates copy and links according to make/ui discussions
21368-part1.2.diff (8.2 KB) - added by SergeyBiryukov 20 months ago.
21368-part1.3.diff (18.9 KB) - added by lessbloat 20 months ago.
21368-part1.3.without-dev.diff (18.9 KB) - added by georgestephanis 20 months 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 20 months 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 20 months ago.
21368.6.diff (25.7 KB) - added by sabreuse 20 months ago.
21368.6.1.diff (25.7 KB) - added by sabreuse 20 months ago.
21368.7.diff (22.8 KB) - added by helenyhou 20 months ago.
21368.8.diff (22.5 KB) - added by georgestephanis 20 months ago.
21368.8.1.diff (23.0 KB) - added by georgestephanis 20 months ago.
21368.9.diff (23.1 KB) - added by lessbloat 20 months ago.
21368.10.diff (24.5 KB) - added by ryelle 20 months ago.
21368.10.refresh.diff (24.4 KB) - added by lessbloat 19 months ago.
21368.11.diff (20.6 KB) - added by lessbloat 19 months ago.
21368.12.diff (21.9 KB) - added by sabreuse 19 months ago.
21368.12.nopointers.diff (15.3 KB) - added by georgestephanis 19 months ago.
21368.13.nopointers.diff (15.3 KB) - added by lessbloat 19 months ago.
21368.14.nopointers.diff (15.3 KB) - added by helenyhou 19 months ago.
21368.15.nopointers.diff (15.3 KB) - added by lessbloat 19 months ago.
21368.16.no-customize.diff (1.6 KB) - added by DrewAPicture 19 months ago.
First-pass: Adds hide-if-no-customize to primary button
21368.16.1.no-customize.diff (1.6 KB) - added by DrewAPicture 19 months ago.
Fixes admin-header checks
21368.16.2.no-customize.diff (1.8 KB) - added by lessbloat 19 months ago.
21368.17.diff (2.2 KB) - added by lessbloat 19 months ago.
21368.18.diff (1.3 KB) - added by lessbloat 19 months ago.
21368.18.2.diff (1.6 KB) - added by lessbloat 19 months ago.
21368.18.3.diff (1.7 KB) - added by sabreuse 19 months ago.
refresh of .18.2
21368.19.diff (2.7 KB) - added by lessbloat 19 months ago.
welcome panel with icons.png (169.5 KB) - added by saltcod 19 months ago.
Welcome panel with icons
getting-started-icons.png (76.7 KB) - added by empireoflight 18 months ago.
Welcome icons in WP style
icon_add_page_32.png (1.0 KB) - added by empireoflight 18 months ago.
welcome_screen_icons.zip (1004.9 KB) - added by empireoflight 18 months 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 18 months ago.
welcome-icons-2x.png (6.8 KB) - added by lessbloat 18 months ago.
21368.20.diff (8.8 KB) - added by lessbloat 18 months ago.
21368.20-refresh.diff​ (8.1 KB) - added by lessbloat 18 months ago.
Screen Shot 2012-11-05 at 12.56.34 PM.png (107.6 KB) - added by ryan 18 months ago.
Retina icons
21368.21.diff (8.2 KB) - added by lessbloat 18 months ago.
21368-welcome-panel-css.diff (3.3 KB) - added by TobiasBg 17 months ago.
Optimize and Shorten welcome panel icon CSS
21368.diff (7.9 KB) - added by helenyhou 17 months ago.
21368.2.diff (7.8 KB) - added by helenyhou 17 months ago.
21368-20.patch (9.9 KB) - added by azaozz 17 months ago.
21368.3.diff (11.0 KB) - added by helenyhou 17 months ago.

Download all attachments as: .zip

Change History (132)

comment:1 lessbloat21 months 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 21 months ago by lessbloat (previous) (diff)

comment:2 ipstenu21 months ago

  • Cc ipstenu added

comment:3 sabreuse21 months ago

  • Cc sabreuse@… added

comment:4 beaucollins21 months 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.

comment:5 follow-up: lessbloat21 months 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. :-)

comment:6 in reply to: ↑ 5 beaucollins21 months 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

beaucollins21 months ago

Hopscotch plugin, demo of quick links search

comment:7 bootsz21 months ago

  • Cc bootsz added

comment:8 DrewAPicture21 months 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?

comment:10 lessbloat20 months 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.

sabreuse20 months ago

Updates copy and links according to make/ui discussions

comment:11 sabreuse20 months 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.

comment:12 SergeyBiryukov20 months 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 20 months ago by SergeyBiryukov (previous) (diff)

lessbloat20 months ago

comment:13 lessbloat20 months 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?

comment:14 sabreuse20 months 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.

georgestephanis20 months 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

georgestephanis20 months ago

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

comment:15 georgestephanis20 months 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?

lessbloat20 months ago

comment:16 lessbloat20 months 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.

sabreuse20 months ago

sabreuse20 months ago

comment:17 sabreuse20 months 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

helenyhou20 months ago

comment:18 helenyhou20 months 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 20 months ago by helenyhou (previous) (diff)

georgestephanis20 months ago

comment:19 follow-up: georgestephanis20 months 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.

georgestephanis20 months ago

comment:20 georgestephanis20 months ago

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

comment:21 in reply to: ↑ 19 azaozz20 months 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.

comment:22 lessbloat20 months 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".

lessbloat20 months ago

comment:23 lessbloat20 months 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".

comment:24 ryelle20 months 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' );

ryelle20 months ago

comment:25 follow-up: lessbloat20 months 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 20 months ago by lessbloat (previous) (diff)

comment:26 in reply to: ↑ 25 ; follow-up: helenyhou20 months 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.

comment:27 in reply to: ↑ 26 lessbloat20 months 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. :-)

comment:28 JerrySarcastic20 months 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.

comment:29 nacin19 months ago

  • Type changed from enhancement to task (blessed)

comment:30 lessbloat19 months ago

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

Last edited 19 months ago by lessbloat (previous) (diff)

comment:31 helenyhou19 months 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.

comment:32 melchoyce19 months ago

  • Cc melissachoyce@… added

lessbloat19 months ago

comment:33 lessbloat19 months ago

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

sabreuse19 months ago

comment:34 sabreuse19 months 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"

comment:35 helenyhou19 months ago

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

comment:36 helenyhou19 months ago

  • Keywords commit added

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

comment:37 lessbloat19 months 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.

comment:38 lessbloat19 months ago

21368.13.nopointers.diff fixes comment:37.

comment:39 helenyhou19 months ago

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

comment:40 nacin19 months ago

In [22018]:

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

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

comment:41 azaozz19 months ago

In [22028]:

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

DrewAPicture19 months ago

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

DrewAPicture19 months ago

Fixes admin-header checks

comment:42 DrewAPicture19 months 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.

comment:43 lessbloat19 months 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.

lessbloat19 months ago

comment:44 lessbloat19 months 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.

lessbloat19 months ago

comment:45 nacin19 months 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.

comment:46 nacin19 months ago

In [22089]:

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

comment:47 lessbloat19 months 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

lessbloat19 months ago

comment:48 lessbloat19 months ago

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

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

comment:49 nacin19 months 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.

sabreuse19 months ago

refresh of .18.2

comment:50 sabreuse19 months ago

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

comment:51 helenyhou19 months ago

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

lessbloat19 months ago

comment:52 lessbloat19 months ago

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

saltcod19 months ago

Welcome panel with icons

comment:53 follow-up: saltcod19 months 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 19 months ago by saltcod (previous) (diff)

comment:54 saltcod19 months ago

  • Cc saltcod added

comment:55 JerrySarcastic19 months ago

That looks quite nice, actually. +1

comment:56 follow-ups: melchoyce19 months 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 19 months ago by melchoyce (previous) (diff)

comment:57 in reply to: ↑ 56 nacin19 months 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.

comment:58 in reply to: ↑ 53 lessbloat19 months 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).

comment:59 lessbloat19 months 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

comment:60 empireoflight19 months 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.

comment:61 in reply to: ↑ 56 ; follow-up: empireoflight19 months 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.

comment:62 in reply to: ↑ 61 ; follow-up: melchoyce19 months 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?

comment:63 in reply to: ↑ 62 ; follow-up: nacin19 months 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

empireoflight18 months ago

Welcome icons in WP style

comment:64 follow-up: empireoflight18 months 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?

comment:65 in reply to: ↑ 64 lessbloat18 months 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 18 months ago by lessbloat (previous) (diff)

comment:66 in reply to: ↑ 63 melchoyce18 months 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.

comment:67 nayarain18 months 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)

comment:68 follow-up: lessbloat18 months 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?

comment:69 in reply to: ↑ 68 ; follow-up: empireoflight18 months 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?

comment:70 in reply to: ↑ 69 lessbloat18 months 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

empireoflight18 months ago

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

comment:71 follow-up: empireoflight18 months 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

comment:72 in reply to: ↑ 71 lessbloat18 months 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.

lessbloat18 months ago

lessbloat18 months ago

lessbloat18 months ago

comment:73 lessbloat18 months 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

comment:74 follow-up: ryan18 months ago

wp-admin.css needs refresh.

comment:75 in reply to: ↑ 74 lessbloat18 months ago

Replying to ryan:

wp-admin.css needs refresh.

21368.20-refresh.diff should do the trick.

ryan18 months ago

Retina icons

comment:76 ryan18 months ago

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

lessbloat18 months ago

comment:77 lessbloat18 months 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.

comment:78 ryan18 months 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

comment:79 follow-up: TobiasBg17 months 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.

TobiasBg17 months ago

Optimize and Shorten welcome panel icon CSS

comment:80 in reply to: ↑ 79 azaozz17 months ago

Replying to TobiasBg:

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

comment:81 TobiasBg17 months ago

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

helenyhou17 months ago

comment:82 helenyhou17 months ago

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

comment:83 helenyhou17 months ago

21368.2.diff is a refresh after r22629.

Version 0, edited 17 months ago by helenyhou (next)

helenyhou17 months ago

comment:84 lessbloat17 months ago

+1 to 21368.2.diff​. Looks good.

azaozz17 months ago

comment:85 azaozz17 months 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?

helenyhou17 months ago

comment:86 helenyhou17 months 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 :)

comment:87 azaozz17 months ago

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

Fixed in [22638].

comment:88 helenyhou17 months ago

New tickets from now on, please.

Note: See TracTickets for help on using tickets.