Improving Visuals

[ermbrown]

Overview

We updated the the images to SVGs to appear clearer online, We also updated the language in the "Make letter writing less intimidating" section. Lastly we updated the colors of the numbers and the letter content and image quality. Reference Issue #980

Action Items

• Update Involvement and Letter images to SVGs
• Updated content to the letters and Making writing less intimidating sections

Resources/Instructions

Reference issue #1079 in Dev Team Page 210

SVG Link in Improving Visuals

SVGs linked below

[sydneywalcoff]

@emmathrash can you export the assets and link them under the resources?

also the numbers you're referring to in the figma is also an image, can you include that with the other resources?

reassign me when its ready, please :)

[ermbrown]

@sydneywalcoff Just added a link the the assets. :) I've added the SVGs. Please let me know if there is anything missing.

[ermbrown]

[davidwiese]

ETA: before 1/25/24 meeting

[davidwiese]

@sydneywalcoff @ermbrown

Hi guys - here are some before/after screenshots with the screenshotExample and completeLetter .png files replaced with the .svg files.

Visuals before changes are applied

Visuals after changes are applied

As you can see, there are some odd artifacts present with the svg files. In the screenshotExample, they are at the bottom of the Involvement bubble, and in the completeLetter, the side edges are really jagged.

One other thing to note for the "Updated number color" change - that entire section is a .png image, so I'm unable to just go in and change the color on the numbers. It also appears that the color of all the "How it works" text to the left of the numbers was changed from russian violet to black as well (not sure if that was intended as the rest of the page still uses russian violet).

[anitadesigns]

Hey @davidwiese, thanks for bringing this to our attention and catching that!

For the svgs coming out with jagged edges, it looks like it may be due to the drop shadow we added. We can export the illustrations as SVGs again without the drop shadow. Would it be possible to add the drop shadow on your end? If not, @jyehllow and I can keep exploring!

As for the "Updated number color" and updating the color for "How it works", please disregard. Seems like that was an oversight from my end as the font color should email russian violet until we finalize our color system. I'll go ahead and remove that change from under the "Action items" to this issue

[davidwiese]

Hi @anitadesigns!

I don't think it's possible for me to add drop shadows in really precise places once the SVG is generated. I can only apply it to the entire element once it is in the DOM. I think moving forward I will need finished files to drop in, and then I can make sure it is responsive and renders properly at different screen sizes.

Copy that on the color change!

[sydneywalcoff]

@anitadesigns David is right about adding dropshadow to nonconventional shapes.

The easiest solution will probably to have the svg exported with the drop shadow and a square/rectangle transparent background just barely larger than the letter image.

[anitadesigns]

@jyehllow was able to fix the Letter images, but still working on fixing the Involvement image. @jyehllow can you export and upload those svgs here?

@davidwiese we;ll get you the Involvement image once we figure it out!

[davidwiese]

@anitadesigns @jyehllow thanks!

[jyehllow]

Here you go @davidwiese! I made two versions of the fix for each one - one with a small 0.1px border of a really light color (v2), and a variation with just 1px extra width on each side (v3). Not sure if you have a preference for which one works better!

[anitadesigns]

@davidwiese here are the Involvement screenshots! Lmk if they don't work