Illustrations (Initial Planning)

[sudara]

Approach

1. Illustrations could be made on an organically-shaped (vs. square) wash color background —that would enable them to be placed on both a white or a dark background. We could also do an "outline"/cut-out sort of vibe too maybe? Samo thinks it's wise to try to take a route like this to short circuit getting into the weeds of "does this illustration work on both white/black background".

2. We could set expectations that we are designing "elements" that might be repurposed or repositioned vs. try to get very exact. This might be more productive and give us more material to play with. Regardless, we probably want to do the illustrations first, and then have Samo "seat" them in the content vs. get pixel-perfect about how exactly the smaller ones might lock in. It's ok to have specific ideas like "this guitar overlaps this box" but ultimately there might be another round of design on the page, etc. When it doubt, being flexible is good.

3. We need to consider mobile for any "out of the box" layouts (like having decorations outside a text box) or any illustration that needs to be exactly positioned.

4. We can try out random decorative ideas like having an illustrated content separator, a decorative set of music icons to scatter about, etc.

5. The new theme is currently extremely dry and characterless, so even small touches of illustration here and there will significantly impact feel and make things much more friendly and approachable. We can confidently decide to "stay small" in most cases. Note: We will probably aim to keep pages like http://alonetone.com/sudara and https://alonetone.com/montgomeru/playlists/junior-dev almost hygienically clean — the music and artwork from the user takes center stage.

Deliverables

1. Illustrations should be 2x the dimensions they will appear on screen to support retina screens. So for something filling the full 960px content area, we'd need source illustrations in 1920px.

2. We need to be able to lift illustrations from the background. So, png or flat files work if the background is transparent OR if the illustration is on a wash color background.

Blank Slates

Purpose: Reassure the user that they are "on the right track" and provide some explicit friendly guidance. Without them, a page looks empty and there can be a sense of confusion about what's next or "writers block."

Layout: Full width on phone and the full 960px on desktop. On desktop, it might only take up a part of the page and have content below. On mobile, it will depend on the quantity of text, etc. Sometimes they will only show up until the user actually has content in place (upload first track) but in other cases they might always be present (adding tracks to a playlist).

Text: These contain "instructive" text (which could in part be in the illustration). Some of the text could be longer and more helpful, for example explaining that a playlist can be a group of work in progress tracks or a real album, etc.

• "Go upload, upload your first track" when user is logged in and hasn't yet.
• "What's a playlist" on create playlist page
• "Go ahead, add some tracks" on edit playlist page
• User has no tracks, listens or playlists

Gift instead of Punishment

Purpose: When a user takes an action is taken and an unexpected result occurs, it's critical to provide a "soft landing" and show that these sorts of things are totally normal and 1) the site isn't broken and 2) the user didn't fuck up.

Layout: Typically full page. Imagine taking up most of a desktop browser or most of a phone screen. This is a chance to stretch out and have fun.

Text: These are pretty straightforward "dead end, sorry" messages that could be in the illustration.

• No search results
• 404 not found
• 500 error

Flavor Enhancements / Flair

Purpose: Content-filled pages need some personality too! Details matter, and these are opportunities to make things more approachable. Note: We probably

Layout: These are smaller elements that will be laid out inline with attention given to mobile browsers.

• Visiting homepage as guest
  • Person on a tiny island with guitar
• About page / values
• Forum categories
• Different ways to "break the box layout" — for example, having an big ear illustration overlay the right hand side of the box for "who you follow"

[PhaseSevenComics]

Hi alonetone folks, my name is Alec Longstreth. I'm the illustrator Sudara has tapped for this project! You can see some of my previous illustrations over here.

Sudara, could you post (or send me) some of the previous graphics (logos, etc) that have been used on past versions of the site? Or like the hex code for the orange being used for headlines? It would be great to lock in a limited color palette for all the new illustrations to keep everything cohesive, and I'd love to build off of the unique oranges and grays that have been used in the past.

Also, what do you think of using animated GIFs for the No Search Results & 404 & 500 (GIFs instead of Punishments?). Like a big illustration with just a little bit of subtle motion? It might make these seem even more fun/less punishing.

For the deliverables being 2X - that's still at 72dpi, right? I thought retina displays could handle higher dpis?

[sudara]

Hey Alec! 👏

We actually just started an effort to get consistent on the color palette. The primary accent orange is #EB7B0C. We use #E02A02 red to indicate "warning" and have various other shades and grays here:

You can also poke around on figma at the design components — this will flesh out more over the months: https://www.figma.com/file/YdjrVsNumbBsWVo82Wje2h6N/alonetone-white-theme?node-id=0%3A1

Also, what do you think of using animated GIFs for the No Search Results & 404 & 500 (GIFs instead of Punishments?).

Not against it! It won't be "distracting" from anything, as there's literally no other content in these cases.

For the deliverables being 2X - that's still at 72dpi, right? I thought retina displays could handle higher dpis?

Yeah, exactly. Retina displays basically display somewhere around 2 x 72 DPI (it's really all over the place). Confusingly, DPI isn't really technically relevant on the web, as the only thing that matters is the actual number of actual pixels contained in the image (can increase DPI or image width).

Annnyway, since 72DPI used to be the standard for screen, the standard tends to be working with images that are at that DPI but 2x the width/height of the target image we need, and the browser renders that down to size.

[PhaseSevenComics]

Well, I'm already leaning stuff!

I whipped up a Photoshop .ACO file which can be imported into the "swatches" panel for easy access to the two main highlight colors and all these other variations. Please let me know if any more colors are added and I can update the file!

[sudara]

Hey Alec!

Working with @smoofles (long time alonetone designer!) last Friday, we did preliminary investigation into how a "blank slate" could look and mocked out a placeholder for the "edit playlist" page.

I'm kinda into the black and white sketch feel — it really contributes a TON of feel and feels "different" from the UI in a good way. Open minded for it not to be pen / black and white — but I'm guessing to keep differentiation we want to avoid that primary orange highlight color, as it's a prime ingredient for the UI.

I thought the white "wash" that the illustration and blank slate text sits on is something we could give minimum dimensions on and you could cook up to match the illustration style. Otherwise we can do it too. I guess we'd default to #FFF and #000 depending on the theme.

More on dark vs. light theme: If we keep things one/two color, we can also have samo adjust the color so it looks good in both themes. His recommendation was to deliver colors (if they exist) on independent layers so we can adjust. He also said we should just try 1 or 2 things out and see if it works before going crazy with the rest of the illustrations.

[sudara]

Just realized we might have mobile compatibility issues with a static "wash" behind the illustration/text, as we won't be able to display the same width on mobile. Hmmm maybe @ofsound has some smart thinking.

[PhaseSevenComics]

For a rough edge on the illustration, I could do it two ways: Option 1: You guys give me a pixel dimension to stay within and I could create the illustration, leaving a bit of space to transition to transparency with the rough edge.

Option 2: I could make "normal" rectangular illustrations and then we could overlay a frame with a rough edge that matches the background color of the page. This might be a fix for the mobile thing? You could make a mobile-specific frame that works on top of a resized rectangular image file. You could also reuse it around the site? I guess we'd need multiple sets for mobile, desktop, dark vs. light, etc.

I'm cool sticking with black and white (especially during the first round of tests) and then once we see the overall page design we could see if adding color would work or not. I'm thinking more clean line drawings than cross-hatching, which can have trouble looking nice at small sizes.

If it's literally just black lines on a white background that can also reverse very cleanly (white lines on a black background) for dark theme.

[PhaseSevenComics]

I was supposed to come up with a sample illustration for "What's a Playlist?" (over in 767) but I realized I can't do that yet until I know what type of illustrations you guys want on the site.

I spent the weekend doing a bunch of quick drawings in my sketchbook, and I've grouped them into five different "treatments." Hopefully folks can weigh in and we can pick a direction, then I can start brainstorming specific illustrations within that approach.

Treatment 1 - Non-Descript Musician Figures

Con: Might be too detailed for the small image size? Pro: Would look cool on the big "Gift instead of Punishment" pages

Treatment 2 - Music Gnomes

Treatment 3 - Word Art

(As with all of these sketches, the text here is placeholder - I realize that the 500 Error would be a full page illustration, etc). Would this be visually overwhelming? Text paired with more text?

Treatment 4 - Musical Objects

Treatment 5 - Extreme Close-Up

Sorry for the long post! Let me know if one of these ideas (or some combination of multiple ideas) feels like a good fit for the site.

[sudara]

I spent the weekend doing a bunch of quick drawings in my sketchbook

😱 😱 😱 Where's the invoice, because YOUR DONE! 16 illustrations in the bag, rake in the cash, let's go!

Seriously though, very excited about some of these! And using sketches in general.

I can't do that yet until I know what type of illustrations you guys want on the site.

I've been waiting for this to come up 😈

I only have a couple solid ideas, and they are all contextual:

1. On the homepage for "what is alonetone?" it might be funny to do a twist on the classic desert island schtick: a person leaning against a palm tree playing a guitar.

2. I've been warming up to the idea of there being a narrator who emotionally expressive, especially for the blank slates / gift instead of punishments.

3. We're on the same wavelength about smaller decoration stuff. I think there's some good opportunity to go through some of the drier content (like FAQ / about) and pull out some themes that might be funny to illustrate. I can start off by generating a list.

You just did step 1 and "seeded" the otherwise blank page so yay! I think this gives us a ton to work from.

I <3 treatments 1/2/5 generally — I'd like to maybe go through some more of the content the illustrations are accompanying before deciding on subjects.

That gnome....looks....suspiciously....like.....a lone toney — could the gnomes narrate?

[sudara]

For a rough edge on the illustration, I could do it two ways:

Oooh, missed this a couple days ago. I think I'm a bit confused by the two options, I think both of those are fine as long as we can hand samo the frame and illustration separately.

Good call, I do think cooking up a couple sizes of frames is the way to go. I just don't know yet how we'd organize text + illustration on a constrained width browser like a phone for something like https://github.com/sudara/alonetone/issues/767

[PhaseSevenComics]

1. On the homepage for "what is alonetone?" it might be funny to do a twist on the classic desert island schtick: a person leaning against a palm tree playing a guitar.

That would work well with the Treatment 1 idea. But c'mon, ukulele not guitar for that gag, right? 😎

2. I've been warming up to the idea of there being a narrator who emotionally expressive, especially for the blank slates / gift instead of punishments.

I'm open to this idea, but in my sketches I was wary of making it a specific narrator (like me, or Sudara, or one fictional character). In comics there is this technique of making your main character as simple as possible so that more readers can see themselves in those shoes. If there is a lot of detail (a tall white guy with thick black glasses and a beard) it's harder for readers who do not share those attributes to go "that's me."

This was sort of rolling around in the back of my head while thinking of an alonetone narrator. If it's a specific narrator, how does that feel for a diverse set of users? My idea with the Treatment 1 non-descript folks would be that maybe users don't identify with every character, but as they navigate the site and are exposed to more and more of these illustrations, there might be one or two that they do identify with, and seeing a diverse group of narrators might help build a sense of community?

It's also possible I'm over-thinking this....

3. We're on the same wavelength about smaller decoration stuff. I think there's some good opportunity to go through some of the drier content (like FAQ / about) and pull out some themes that might be funny to illustrate. I can start off by generating a list.

Yeah, we could also mix and match the approaches above. Like use Treatments 1 or 2 on the site, but Treatment 5 on the message board. Since they will all come from the same hand with the same tools, they'll still feel cohesive.

That gnome....looks....suspiciously....like.....a lone toney — could the gnomes narrate?

Totally! I could put the orange alonetone whole note on his chest, and then the head changes to whatever's needed? That might make it clear it's always the same character, but with different heads, depending on the situation? It would work for the "non-specific" thoughts above. I know "Tony" was just a joke, but it could work, if that's the direction you want!

[sudara]

ukulele not guitar for that gag, right?

I'm down with that :)

In comics there is this technique of making your main character as simple as possible so that more readers can see themselves in those shoes. If there is a lot of detail (a tall white guy with thick black glasses and a beard) it's harder for readers who do not share those attributes to go "that's me."

Thanks for sharing that. That seems like wise thinking.

My excitement came from seeing your illustrated face juxtaposed in the design — it feels personal and different and expressive and like "your helper buddy" is there — something we might miss out on going the non-descript route. In other words, the character would be a friend you like vs. "this is you!"

I don't want to be the narrator, but thinking about it logically, it does seem like it would make sense to have a specific human personality. Maybe Ben? Heheheh. Let's sign him up! HMMMMMMM.

Since they will all come from the same hand with the same tools, they'll still feel cohesive.

💯 to that. Zoomed out, the approach on our end is "have our talented artist friend add spots of black and white sketches to contrast against the very clean/featureless UI." That being said, I'm all for (attempting to reach) thematic consistency, plus it's fun!

[PhaseSevenComics]

Sudara and I talked over Skype today and decided that we really do want a narrator character to use throughout the site. I tried a few ideas based on Treatments 1 & 2 (above) and then plugged them all into the "desert island gag" illustration, so we can see how these would all look in use.

Let me know if one of these feels like the right narrator and we can start digging into the list of illustrations! (We can also use multiple and/or all of these styles in different parts of the site/message board, if we want, etc.)

Humans - Quasi-fictional laid back and/or helpful people

A Lone "Tony" - A super cartoony approach

A Lone Gnome - two different ideas for the musical "head" treatment

[sudara]

Oh Em Gee. Really appreciate all the effort here. So absolutely fun to look at and a bit overwhelming! So many options!

My final votes:

• The narrator will only be used for 4-5 illustrations in total: the "blank slates with instruction." The context is "we actually have something to say." If we use a narrator, I'm pretty stuck on using a real person, such as ben / myself — really frame it as "the people who made this wanna let you know..." Let's have it be personal if we do humans. We could actually use both of us if @ofsound is willing to be a character. I could ask the others if they would be into being a character on one spot too (manfred / samo / jenya), but that might be 5x the work... On the other hand, we could have a sarcastic samo character, so that's a plus! You mentioned speech bubbles – I'm not against reducing/massaging the words and trying that out.

• For the "big" full pagers like the 404/500, I think we should go for very busy, very populated, very hectic "music-headed gnomes partying" vibe and pull out all the stops, go conceptual, go punny, etc. Ideal: people instantly see the message (ERROR!), but get distracted looking at WTF is going on. For example, instead of 1 cohesive scene, 4-5 sub-scenes going on.

• For the smaller "flavor" stuff, I do think there are gnome-ortunities. For example "we are not a startup" we could have alonetone-logo-headed gnome facing off against spotify/facebook/soundcloud-headed gnomes in suits. We can actually upgrade this one to a fuller width and have it take up more space on the "about" page. This might be the case for some of the other "flavor" ones that pair with text, we'll have to see what concepts we come up with.

• However, some of the smaller flavor things might be better "gnome-free" vs. forcing the gnome — for example, "report bugs" is one of the forums. Sure, this could be a gnome chasing/picking up a bug, but it could also just be a very simple illustration of a bug. We might be more size constrained there, so it might be nicer to keep some of the flavor spots simpler and less dominant/complex. We can play it by ear!

• We should pick a gnome for the desert island illustration (vs. narrator). Uke-gnome is perfect! alonetone-sun is a stroke of genius! We just need to make sure it'll work at size (we can add 1-2 colors to that one).

• This process was really useful! As a next step, I think we should throw some ink at the actual page It can be temporary or iterative, but I think getting a few initial things roughed in will help iron out deets.

gnomes R us.

[PhaseSevenComics]

If we use a narrator, I'm pretty stuck on using a real person, such as ben / myself — really frame it as "the people who made this wanna let you know..." Let's have it be personal if we do humans. We could actually use both of us if @ofsound is willing to be a character. I could ask the others if they would be into being a character on one spot too (manfred / samo / jenya), but that might be 5x the work...

Oh man, as soon as I read this it was like a little light went on (DING!). That's the perfect solution I think -- actually make it the people who built the site! Could I get "approved" photos of team members to design their cartoon selves off of? Like a good headshot from front/side and one full figure photo (from head to toe?). Only folks who want to "opt-in" to this idea, I guess...

Everything else sounds great! I'm going to like print this comment out and tape it in my sketchbook. I'll start going through the lists over in on 784 and 767 and start drawing the illustrations and/or sketching out ideas.

Should I upload .jpgs to GitHub? I don't want to bog down threads or make it hard to search for stuff. I could also put these in a dropbox folder for people to check out at their leisure? Any guidance on dimensions/proportions would be helpful.

Thanks for going through this initial "design phase" with me. I know it was a lot to dig through, but I'm happy where it ended up, and all this stuff gives me a better idea of what we are going for, and so will hopefully simplify things going forward!

[sudara]

I just had my aha! moment — as one of the contributors building this site, narrator Alec is a must!

[PhaseSevenComics]

Okay, I'm in!

[sudara]

Seems like we nailed everything down, so I'm going to close this out. It'll still be here for reference as a "closed" issue.