1

Ok. This is long, but SO worth it! @Galactic-Radiance ’s idea about updating talk page award templates got me energized about a community project to refresh some of these awards! I got chatting with Daisy, who is wikiHow’s amazing Creative Director and knower of all things art-related, and asked her for some tips on how we could make some fresh new templates.

We had a great discussion about what sort of images to use - and realized we have a whole library of amazing illustrations at our fingertips! We could use any images from articles, or part of an image, for example this or this - or any image you find that you think would be a good fit! Alternatively, if you have a vision for a particular image, let me know and I can see what we can do :) 

Daisy also created a fantastic color palette template, showcasing the different shades of the main wikiHow green, along with secondary and accent colors that work well together that we’re starting to see used throughout the site. I think it would be great to focus on using these colors to help award templates match our branding! You can find the palette here: share.getcloudapp.com/mXuAxx5b

Not only this, but she also created an amazing example sheet where she shows some images around the site using the complementary colors, along with two examples where she updated some current templates to look more modern and follow design principles, and then added some general examples that we can use as inspiration! Wow! Check it out here:  share.getcloudapp.com/RBuqmbQJ

Here are some further tips from Daisy regarding style, layout and color combinations:

✯ Think about the layout:

  • Build visual hierarchy: More important elements should be bigger/bolder/have stronger colors
  • Leave ample space between the text and its borders
  • Using negative space to provide plenty of breathing room around elements and connect related elements closer together
  • Think about alignment: Align images and text so they match

✯ Use harmonic color combinations.

  • Try colors from the image or wikiHow color palette for your design and text color
  • Keep it simple!
  • Avoid bright neon colors like this
  • Avoid bright color reverse text like this as it is hard to read

✯ If using reverse text, opt to use a “bold” font style.

✯ When adding borders:

  • Make it thick and use a color found in the image
  • Try inner thin borders for a stylized look!

Our existing templates can be found here under User Talk Page Templates - Award Templates and Friendly Templates. I think we could simply create new versions of some of these that already exist, using the tips above so they are more friendly on the eyes! If you would like to help with the refresh, feel free to experiment in your namespace, and then post here when you have something that you’d like input or feedback on.

I’m going to tag a few other wikiHowians who mentioned they might be able to help with the refresh - whether designwise or templatewise: @R2_d2000 , @WikiaWang , @HelperOnWikihow , @Kitty0 , and additionally @Byankno1 , who is a good resource if we have specific questions about templates, and @MissLunaRose to check if this might be of interest :) 

I’m excited to see if we can create some fresh, modern awards and revive the use of these so we can keep barnstars as more of a special occasion award. Remember, there’s no right or wrong with any of this, it’s all experimentation, which is how we roll at wikiHow!

2

I would LOVE to help!!! 

3

This is super cool! I would love to help any users who might be in need. I think that this is a good idea because I have definitely come across pages with bright colors that might have been hurtful to someone’s eyes (hence why I had used grey for so long). Love this!

4

I created a new template already: wikihow.com/Template:Bright

If you want advice for creating a nice template, scroll through some of wikiHow’s uploaded images and find one that would suit a template!

6

Can I suggest that we focus primarily on overhauling existing awards before creating new ones? I love the enthusiasm - it’s just that we already do have several awards that we can’t use for various reasons, and I think it would be a good idea to make some of those usable before we go all-in on brand new ones. We can always abandon the ones that are in really bad shape, but I’d love to see the new twists on old templates.

7

@Galactic-Radiance , yes! I am suggesting new versions of the existing ones that are already on the Templates page. I just thought it may be easier for some of them to recreate with the above guidelines and replace them rather than edit the existing one, but perhaps not? I’m not an expert in this area :) 

9

@JayneG Was aiming that statement more at the people reading the thread than you specifically, hah:stuck_out_tongue:

I think in general, it might be better to edit the existing templates directly, because last I checked, templates tend to show up differently when they’re not on the Talk or Discussion namespace. It’d be easier to see if an edit broke something along the way. (I’ve seen templates that looked totally fine in the Template namespace do all sorts of damage to a Talk page!)

10

Ooh, nice! I even saw a couple of my templates on the images. I’ll fix some up now, and send the link from my userspace!

11

@JayneG We’ve always aimed at fixing old - not creating new whenever possible regardless of namespace and use of the page - and that includes Templates. However, if there’s something not here that would be best added, go ahead - but check for dups by searching through the resultant pages first - (not much of a search tool for templates). Can’t go all-in at this time, but I do like that my discussion spurred @Galactic-Radiance ’s post which spawned this separate discussion altogether. Love the collaboration we have going here - appreciate it all!

12

I’m looking forward to helping out with this! It’ll be nice to update some old templates.

13

I’d love to edit older templates as well!

14

I would absolutely love to help with this, is it just like creating a template, except just keep to the colour scheme? I’m gonna go check out how to create a template, if so, I’ve never made one before, this is exiting!!:smiley:

15

Have I done it right? You can find my template here >  wikihow.com/Template:Name-Here

16

@FroggyBiz , yes, that template looks good, but remember, we are improving already existing templates, not making new ones. Although, I do think that your template would be a good replacement for either {{ HThanks }} or {{ ThanksHB2 }}, since those templates don’t seem like much of them can be salvaged for the new design guidelines, and your templates message is similar.

You can see all of our award templates at wikiHow:Templates , under the User Talk Page section.

18

Also, since we are redoing the award templates, can I offer some suggestions. When redoing them, I think that we should make sure that they display correctly on Talk Pages, User Pages, and on the wikiHow:Templates pages, to the greatest extent possible. Also, I think that its a good idea to add some documentation to the templates. You can see a good example of the documentation on the {{Celebrate}} template (although the template itself needs to be redesigned). You don’t need to add much, just something to say what the template is supposed to be used for. I can help with these if necessary.

Also, @JayneG , I know that the wikiHow engineers have been applying the redesign to some pages in the wikiHow namespace, such as the deletion policy page , but the new redesign has not been applied to the wikiHow:Templates pages. Is it possible for the redesign to be applied to these yet. I’m only asking because if we work to make the templates compatible with the older design, and then the new design comes in and breaks some of them, then that work will have been for nothing.

19

Thanks @Snowflakeiesta ! @R2_D2000 I will bear that in mind, thanks!

20

I refreshed the one that used to have swans on it, I used the same format, what do you think? You can find the new template here >  wikihow.com/Template:Love

21

I have deleted the page as it seems you have made the exact same template here . If I am missing something, please do let me know. You can still use the template, but with the code {{FriendlyThanks}} instead.

22

@FroggyBiz wow! awesome! I see that you did change some of the text, so we might need to get some consensus on that, and then use one in place of another as R2 mentioned, but I really love the design changes and how it looks so on-brand for wikiHow! 

@RubyRoseRain thank you for cleaning up the extra pages and spelling :) 

@R2_d2000 you really got me thinking with the responsive stuff. I realized that perhaps it’s not about whether the template page will be made responsive, but more that the template needs to be responsive depending on the page it’s on. I managed to squeeze in some time with engineer Scott, who helped with a possible solution. When I tested it on one, it seemed to work and respond to the page size of the talk page it was on - though I don’t guarantee it will work for all different template designs, it’s definitely a great start! Here are the deets:

Instead of having a fixed width or height, we want it to change depending on the side of the page. So, we replaced 

<div style="width: 450px; height: 500px; 

with

<div style="max-width: 450px; width: 100%; height: auto; box-sizing: border-box; 

So, basically this says instead of making sure it’s 450 x 500, it will now be at the most 450, but can be made smaller when the screen size decreases - changing the height, the box, and the border with it! Super cool.

I think it’s a good idea to test that they work, so perhaps people refreshing templates and/or others who would like to help out but don’t want to design can check them by posting an updated template on someone’s talk page, and seeing if the size of the template changes as you decrease the screen size, and whether everything stays intact!

23

@RubyRoseRain , thanks for clearing that up!