Create generic cityscape or skyline for landing page

[jonfroehlich]

One small(ish) task, which is admittedly more graphic design oriented than UX, is to create a generic cityscape or "skyline" that we can use in our deployment cities (when we don't have the resources to make a custom one). Typically, these are created as vector graphics and then rasterized to png. Originally, we started to make city skylines per deployment city but this doesn't scale very well as we launch into more cities like Newberg, OR, Columbus, OH, Mexico, etc.

For example, here's Washington DC:

And here's Seattle:

But then here's Mexico City, which uses the Washington DC cityscape—not great!

Here's an old discussion thread.

[gari01234]

I can help with that. Do you prefer a generic design or one for each city?

[jonfroehlich]

That would be great @gari01234. Ideally, one for each city; however, this is just too much overhead for us, I think, because we don't have a fulltime (or event parttime) designer at the moment. So, we need a generic one to use for *all* cities that don't have custom skyline graphics. We can always add a custom skyline after initial deployment as well.

…

On Tue, Jun 30, 2020 at 2:23 AM Gari01234 ***@***.***> wrote: I can help with that. Do you prefer a generic design or one for each city? — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#2155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55PPQXE6ZPTAVB6KY33RZGVKDANCNFSM4OLNU77A> .

-- Jon Froehlich Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[jonfroehlich]

@misaugstad Do you know where we have the original vector files (.ai files) stored for these cityscapes (for Washington DC and Seattle)?

• The DC graphic png (for the webpage) is here: https://sidewalk-dc.cs.washington.edu/assets/assets/dc_graphic.png. It's 4085x1740 pixels.
• The SEA graphic png is here: https://sidewalk-sea.cs.washington.edu/assets/assets/seattle-wa/skyline.png. Again, 4085x1740 pixels

We should, of course, try to maintain the overall aesthetic and color palette.

I think the best process here, like anything with IxD, is to make some rapid mocks for us to give feedback on.

[gari01234]

The missing ones are: Columbus, Newberg, CDMX and SPGG or? I can probably deliver 1 per week. Let me know if you have more things that need a design. I am not a designer by profession, but maybe I can help.

Here is a sketch of CDMX skyline

[jonfroehlich]

Yep. That’s the list of missing cityscapes—again, we could develop a generic one until we have time to fill in with custom. LOVE the CDMX skyline. Wowow! Is this the right aspect ratio and resolution?

…

Sent from my iPhone

On Jun 30, 2020, at 7:18 AM, Gari01234 ***@***.***> wrote:  The missing ones are: Columbus, Newberg, CDMX and SPGG or? I can probably deliver 1 per week. Let me know if you have more things that need a design. I am not a designer by profession, but maybe I can help. Here is a sketch of CDMX skyline — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or unsubscribe.

[gari01234]

I used the color palette from the Seattle skyline. I want to change a couple of things and tomorrow I can send you the final version, with the correct resolution. Do you have any suggestions or changes that you want me to make in the CDMX skyline?

[jonfroehlich]

Your color palette is great!

Now that I'm on my desktop (and not my phone), I can tell that the image is a bit pixelated (especially the statue). So, I would fix that, if possible. I believe we designed our original cityscapes in a vector graphics tool like Inkscape or Adobe Illustrator and then rasterized to png.

Another comment is that your skyline doesn't show streets/pedestrian areas, which seems important given the focus of our tool. But, of course, this is a problem with all our cityscapes, so not a big deal if hard to fix.

And then the final thing, of course, is making sure it's 4085x1740 pixels.

We'll then have to see how it fits with our text overlays

[misaugstad]

@misaugstad Do you know where we have the original vector files (.ai files) stored for these cityscapes (for Washington DC and Seattle)?

I looked through our assets and only see PNGs. I'm not sure who made the original DC one. But I @bridgetsheff made the Seattle skyline (#1617). I looked through that issue and all of my emails with Bridget, but I never received anything but a PNG. From my emails and that issue thread, it sounds like Bridget was in contact with you a lot more than me during the process, so there's a small possibility that you have the .ai files in your email somewhere? If not, we'd have to ask @bridgetsheff for them. And if you have any leads on the DC skyline, lmk.

[jonfroehlich]

I looked in my email. I think she sent via Slack and we don't have a paid account--so, lost for now. I checked. But it seems like maybe Edgar doesn't even need the .ai files since he whipped up the Mexico City version so quickly without them! :D

…

On Tue, Jun 30, 2020 at 3:16 PM Mikey Saugstad ***@***.***> wrote: @misaugstad <https://github.com/misaugstad> Do you know where we have the original vector files (.ai files) stored for these cityscapes (for Washington DC and Seattle)? I looked through our assets and only see PNGs. I'm not sure who made the original DC one. But I @bridgetsheff <https://github.com/bridgetsheff> made the Seattle skyline (#1617 <#1617>). I looked through that issue and all of my emails with Bridget, but I never received anything but a PNG. From my emails and that issue thread, it sounds like Bridget was in contact with you a lot more than me during the process, so there's a small possibility that you have the .ai files in your email somewhere? If not, we'd have to ask @bridgetsheff <https://github.com/bridgetsheff> for them. And if you have any leads on the DC skyline, lmk. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55JDQBYRLWVDSF6I7O3RZJP3JANCNFSM4OLNU77A> .

-- Jon Froehlich Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[gari01234]

no need for the the original vector files.

Another comment is that your skyline doesn't show streets/pedestrian areas, which seems important given the focus of our tool. But, of course, this is a problem with all our cityscapes, so not a big deal if hard to fix.

I think this is essential considering that the project has more to do with people than with buildings. I prepared another sketch, putting people at the center of the design. In my opinion, this drawing has more to do with the objective of the project ... but in the end you have the last word on what direction you want to take.

let me know what you guys think :)

[jonfroehlich]

Seems great to me. I wonder if we could add in people using different types of mobility aids? Like a person with a walker and, perhaps, a person with a wheelchair? Maybe also a way to accentuate the curb ramps? How do you come up with this stuff so fast? And you call yourself "not a designer!" Jon

…

On Wed, Jul 1, 2020 at 12:32 PM Gari01234 ***@***.***> wrote: no need for the the original vector files. Another comment is that your skyline doesn't show streets/pedestrian areas, which seems important given the focus of our tool. But, of course, this is a problem with all our cityscapes, so not a big deal if hard to fix. I think this is essential considering that the project has more to do with people than with buildings. I prepared another sketch, putting people at the center of the design. In my opinion, this drawing has more to do with the objective of the project ... but in the end you have the last word on what direction you want to take. [image: cdmx test 2] <https://user-images.githubusercontent.com/50057640/86283774-e4ddd380-bbe1-11ea-9947-6d91a1b3e076.png> let me know what you guys think :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55NVBHMMLOZCSBW5GXLRZOFLNANCNFSM4OLNU77A> .

-- Jon Froehlich Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[gari01234]

I am used to drawing every day on the computer 😅

Seems great to me. I wonder if we could add in people using different types of mobility aids? Like a person with a walker and, perhaps, a person with a wheelchair? Maybe also a way to accentuate the curb ramps?

it's a very good idea, I will make those changes.

[jonfroehlich]

Great. Thanks @gari01234! I'm very impressed with your skills!

[gari01234]

added people using different types of mobility aids. Still working on the curb ramps (not as easy as I thought). But it looks good... if you want to use this graphic as the generic cityscape, I will change the red color of the flag, just let me know.

[jonfroehlich]

Wonderful! Yes, let's change the flag color for the generic cityscape. Would you like us to use this one (as above) for Mexico City and San Pedro?

We may need to do some slight edits once we add in the overlay:

[gari01234]

yes, I would like to use this one for Mexico City and San Pedro. How can I know how much space the texts take up (miles covered, labels, validations...)? so that I know how to adjust the image.

[jonfroehlich]

Unfortunately (or perhaps fortunately, I don't know which is better, ha), it looks like the clouds/bubbles are directly rasterized in the image rather than overlaid. So, for example, take a look at Washington DC:

And I just experimented quickly with Google Chrome's Dev Tools. Looks like you can edit the HTML directly in dev tools to point to a different image and it will re-render automatically. Pretty awesome. So, for example:

I then changed the highlighted line (just locally in my browser using dev tools) to:

Safari and Firefox have similar functionality, I think.

[gari01234]

Thank you for the tip ;)
This is how it looks now in my browser. I don't find it bad.

***I can adjust the height of the image, do you think that's a good idea?

[jonfroehlich]

I think it looks pretty good. I wonder if we can have the clouds/bubbles that show up in the DC and Seattle skylines as overlays. @misaugstad, what more do you need from @gari01234 to integrate this into the Mexico City website?

[misaugstad]

Just noticed the little Project Sidewalk logo on the sign in your image, I like it 😁

So here is a little bit of a wider look at the image @gari01234 sent, both at the normal height (first) and if I removed the vertical spacing that is there by default (second):

I feel like in our other skylines, we are really relying on that white/transparent portion at the top of the image and it looks kind of odd without it. Not sure exactly how shift things around so it still looks nice...

[jonfroehlich]

Hi team,

I think we're close! Two things likely need to happen.

1. First, we'll probably need to do slightly different CSS for this cityscape to accommodate the "Your work is making a difference" part (and perhaps, modify the graphic too by making it slightly taller and making more whitespace?)

2. Second, I think we can add that cloud or bubble bottom so that the numbers feel more integrated into the graphic. Someone who's better at CSS than me would likely just create this as a white png layer and insert it via CSS as an overlay so it works across all graphics. For now, I just attempted to add the cloud bottom directly via Photoshop. I tried both with the DC bottom and the Seattle bottom (since they are different). Thoughts? I think the DC bottom looks better.

DC Cloud Bottom:

Seattle Cloud Bottom:

And here's the source .psd file: https://www.dropbox.com/s/sgcat2b28tz0jvi/CityScapeBackground.psd?dl=0

[misaugstad]

I agree that the DC bubbles look better. @jstadeusiak you've started learning how to use photoshop for other tasks; would you be interested in taking this one up?

[jstadeusiak]

Definitely, I can finish the rest of this up!

[misaugstad]

Awesome, thank you! And don't hesitate to post on this issue and/or message/call me if you need more info or feedback.

[gari01234]

I feel like in our other skylines, we are really relying on that white/transparent portion at the top of the image and it looks kind of odd without it.

agree with this.

Using the PSD file, with the clouds added by @jonfroehlich , I modified the height of the white space at the top of the image. I made two variants and tested them in the browser, which differ in height. Here a screenshoot (with poor image quality) to see the result of both and to be able to compare them.

@jstadeusiak
Thank you very much for helping with this. I share with you the last adjustments I made, hoping that they can be useful to you.

links to download images:
https://user-images.githubusercontent.com/50057640/87920098-01e72300-ca79-11ea-8541-84ced27009b5.jpg
https://user-images.githubusercontent.com/50057640/87920389-6b673180-ca79-11ea-9ba7-cf513d7c1fee.jpg

link to download Jons PSD File (with small adjustment):
https://drive.google.com/drive/folders/1R3W2gHP0ub7rUSmoCraB8e51dnkR5kHI?usp=sharing

[jonfroehlich]

Thanks all. I think I like the taller one (on the right) better but we need some way of distinguishing the text—obviously, as now, the text is visually in conflict with the image. @jstadeusiak, perhaps we can have some white translucency applied in CSS to the background of the text? I think maybe 80% opacity (so mostly not transparent). Same with the button.

[jonfroehlich]

Just made something for you. It's below (in all white)

And here's the url: https://user-images.githubusercontent.com/1621749/88227178-d1e37f80-cc32-11ea-98a1-c96bccdcc3e1.png

[jstadeusiak]

Thanks! I'll post results soon.

[jstadeusiak]

Here is using the overlay png.

[jonfroehlich]

Wo0t! I think we are getting very close. Let's make See Results font bigger and bold.

…

On Wed, Jul 22, 2020 at 4:51 PM John Tadeusiak ***@***.***> wrote: Here is using the overlay png. [image: image] <https://user-images.githubusercontent.com/64165755/88232414-ab214b00-cc2a-11ea-8e40-5dd50f49d89b.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55OKGAUVRI2WKGBBE4TR45NMNANCNFSM4OLNU77A> .

-- Jon E. Froehlich <https://jonfroehlich.github.io/> Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[jstadeusiak]

It actually is bold and slightly bigger in that image, I'll make it more noticeable though.

[jstadeusiak]

Big commit, to wrap this all up coming today, overlay has been a little tricky.

[jstadeusiak]

Here's what I have for the final appearance, the clouds are overlayed using css.

[jonfroehlich]

Awesome. Great job @jstadeusiak.

I think @gari01234 was going to make a version without the Mexico flag colors (but I'm also just fine with keeping it). @gari01234, please do let us know.

[gari01234]

Yes, I will send it tomorrow ;)

[misaugstad]

awesome, thanks @gari01234

@jstadeusiak what do the other skylines look like with the new CSS?

[jstadeusiak]

Not terrible, if whoever has the .psd or even .png of the DC and Seattle skyline can send me those, I can take out the cloud layer then it would look better. Really there is just a gap that is larger than it should be between the bottom of the picture to the statistics.
DC:

Seattle:

[misaugstad]

Not terrible, if whoever has the .psd or even .png of the DC and Seattle skyline can send me those, I can take out the cloud layer then it would look better. Really there is just a gap that is larger than it should be between the bottom of the picture to the statistics.

Honestly, it might be really hard to track the original images down (if not impossible) since I don't see them in our repo already. I know it stretches them a bit, but what happens if you just crop off some of the cloud layer?

[jonfroehlich]

@jstadeusiak, you can just grab the originals in the repo (or directly on each city's website). We don't have the .psds, as Mikey indicated.

[jstadeusiak]

I had the idea to just slide the skyline down in photoshop to match the height of the overlay and this is how it turned out. I think it looks good with the exception of the large white space on the top.

[jstadeusiak]

@misaugstad Here is a cropped version.

[misaugstad]

Both of these look pretty good. But honestly what if you did just like a combination of the two, a little of each? Like the shift has too much whitespace at the top, and the crop puts all the text too low on the image (you can't even see Mt Rainier). But maybe a little bit of both would work?

[gari01234]

Yes, I will send it tomorrow ;)

is ok? Let me know if any changes are necessary

[jonfroehlich]

I like the first one best. Great job @gari01234!

@jstadeusiak, can you use this image as the default city scene backdrop?

[jstadeusiak]

Got it.

[jstadeusiak]

Here is a more balanced Seattle Skyline. Mt. Rainier is pretty visible too.

[jstadeusiak]

Also, The newest image didn't have any white space on top of the image so I made a version with white space on top. Here are the two samples.
White Space:

No White Space:

[jonfroehlich]

Nice work John! I like the Seattle version now and how we can see Mt. Rainier.

Generally, we try to avoid controlling white space by modifying an image—instead, best to do this with CSS...

[jstadeusiak]

Okay, I think I have finally got everything sorted and working with the new classes/styling. I have attached the cityscapes/skylines below, hopefully they look good and I can push the commit, if not, feel free to give more feedback. Also, instead of having a white chunk on top of the picture itself, I did it properly with CSS.

Washington DC:

Seattle WA:

All Others (Columbus, Newberg, Mexico City, San Pedro Garza Garcia, and Pittsburgh):

[jonfroehlich]

Seems good to me. Thanks so much for all your work on this!

…

On Wed, Aug 5, 2020 at 12:22 AM John Tadeusiak ***@***.***> wrote: Okay, I think I have finally got everything sorted and working with the new classes/styling. I have attached the cityscapes/skylines below, hopefully they look good and I can push the commit, if not, feel free to give more feedback. Also, instead of having a white chunk on top of the picture itself, I did it properly with CSS. Washington DC: [image: image] <https://user-images.githubusercontent.com/64165755/89382897-68428700-d6b0-11ea-995f-3a85d9029f30.png> Seattle WA: [image: image] <https://user-images.githubusercontent.com/64165755/89383001-958f3500-d6b0-11ea-8922-e484832aa375.png> All Others (Columbus, Newberg, Mexico City, San Pedro Garza Garcia, and Pittsburgh): [image: image] <https://user-images.githubusercontent.com/64165755/89383439-56adaf00-d6b1-11ea-83cc-fa37b90ea86e.png> — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#2155 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAML55LBSTRGS7A5HO6E7SLR7ECCZANCNFSM4OLNU77A> .

-- Jon E. Froehlich <https://jonfroehlich.github.io/> Associate Professor Paul G. Allen School of Computer Science & Engineering University of Washington http://makeabilitylab.io @jonfroehlich <https://twitter.com/jonfroehlich> - Twitter Help make sidewalks more accessible: http://projectsidewalk.io

[jstadeusiak]

Awesome, pushing the commit now!

[misaugstad]

closing via #2204