Julia Zaytseva

Fundación de diseño visual: haz hermosas slides, informes y interfaz de usuario

<p>Hi Bobbi,</p><p>Thanks for adding a project!</p><p>Great that you explained the thinking behind your work and your own concerns. I'd like to point out that in general it's not that important which tool you're using unless it does the job. I moved from Sketch to Figma over time and I'm loving it (there's a free version, too!). </p><p>Before I dive into the visual design feedback, I'd like to ask you some questions:</p><p>– Who's your audience and at what circumstances they will read this text? For instance, are they student looking for some info for a report? Curious young adults visiting an exhibition? Artists looking for an inspiration?</p><p>– Related question: what is the medium? Desktop, tablet, poster, gallery wall? </p><p>It's important to keep in mind for whom you're designing and in which situations your design will be used.</p><p>So, here's my feedback:</p><p>– Spacing on the page looks pretty good: enough space between the sections, the title is not trapped in the upper section; the paragraphs are the right length, and the line spacing also looks good.</p><p>– Font sizes you use also look big and proportional enough to be comfortable to read. </p><p>– Background colors are too dark to my taste. I would rather keep it white and only use a light shade of grey to highlight or separate some information, like the block with illustrations in your case. I find it quite difficult to use the peach tones as a background, because in the UI design they are widely used for the warning/error messages. The illustrations would look more contrasty on the lighter background.</p><p>– I would keep the picture captions in normal instead of italic. This is my personal preference, though.</p><p>– I feel your struggle with the display and body font here. I see that the display font goes well with the illustrations (similar thin and light strokes), which means you would need to find a lighter body font. Your current choice looks too bold (is it Futura?). Also, I find the fonts with a bigger x-height (the height of the small letters) more legible. You can try Open Sans or Roboto in 300 or 400 weight (light or regular), those are Google fonts.</p><p>– The display font. Thank you for not choosing something that "looks Greek"! However, a couple of points here. </p><p>1. All caps work better for the short headings of max 3 words, otherwise the sentence is rather difficult to read.<br />2. When you use all caps, you need to increase the letter spacing it also helps legibility. <br />3. There are some kerning issues. Kerning is spacing between letters. Optically, all letters should be at the same distance from each other. For some combinations, you need to manually change the spacing in order to make it look like that. If you look at the word Athena, the spacing between T, H, E, N, A looks similar, and between A and T there's a gap. The shapes of A and T make it look like A is separated from the rest of the word. You need to manually decrease this space, if your software cannot do it automatically.</p><p>– You say it still looks very basic. I think the main reason is the centered composition: you center your headings, pictures and picture captions. <br />You can, for example, combine the title Athena and the first heading on the dark blue background. Maybe make this background even bigger. You an also put the images from the very bottom next to the text. You can try rearranging the Athena at a glance images. It's usually a good idea to create more than one option as a part of your explorations. I suggest looking at <a  target="_blank" rel="noopener external nofollow" href="https://readymag.com/examples/">readymag.com/examples/</a> for inspiration.</p><p>I hope this helps!</p><p>Let me know if you have any questions.</p><p>Cheers,<br />Julia</p>

Hi Julia, <div><br /></div><div>Thanks so much for taking the time to give such detailed and practical feedback. 

I decided to take your feedback and make a few quick changes to try and elevate the design.</div><div><br /></div><div>First, to answer your questions; </div><div>- similar to the original source material I would see this as an introductory resource for children aged 10+ and young adults who have an interest in the subject but are not looking for lengthy academic articles. </div><div>- I see this as the main body on a desktop or tablet experience - there would be a navigation bar above and possibly a sidebar (like in the original article) and a footer, all would be in keeping with this design. </div><div><br /></div><div>I have tried to go for a less centred layout this time around and have opted to make all headings and text after the 'Athena' H1 Open Sans Light, as the previous header font was only available in all caps. Having the same font in different sizes for the subheadings and body text seems to make the page easier to read quickly. </div><div><br /></div><div>The alignment isn't perfect - I will definitely have to check out Figma! - but I am hoping that overall this new design is easier to read and more fit for purpose. </div><div><br /></div><div>Thanks again for your feedback :)</div>

Hi Bobbi, <div><br /></div><div> It's already an nice improvement! </div><div><br /></div><div> Some remarks: </div><div>— Great that you fixed kerning in Athena title. </div><div><br /></div><div>— The subtitle under "Athena": while you should add some letter spacing to all caps, you should never add extra letter spacing to the lowercase letters. </div><div><br /></div><div>— Based on the font size, layout and proportions, I would see it as something to read on the phone or tablet. The desktop will have more room to arrange the elements, e.g. you could place the images outside of your text grid. </div><div><br /></div><div>— The font size is rather big for the line width (optimal is about 65-70 characters per line). I like it better when I look at your image at 75% scale, and then I would prefer to increase the line-height. I use ~1.5 coefficient for the body text. 
So, if your text is 16px, the line-height would be 24px; for 20px we need to use 32px because the grid should be divisible by 8. </div><div><br /></div><div>— You could place the image captions right under the images in a small font size. </div><div><br /></div><div>— It would look “calmer” for the eye if you put the images (with captions :) on the left, so the left, "straight", side of the text is nicely aligned the rectangular image. </div><div><br /></div><div><br /></div><div>And it would be nice to make a different layout for this information, but of course it's up to you. </div><div><br /></div><div> Cheers,
Julia</div>

<p>Firstly, thank you Julia for creating this course. I am interested in transitioning into UX design and found this course interesting as an intro to UI design foundations.</p>
<p> </p>
<p>For the project, I decided to take an article about a subject I know and redesign it into a more visually appealing article. I was going to use the Wikipedia entry for Athena but it was just too much text so I chose a simpler article and redesigned the first few sections.</p>
<p><img srcset="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/44a01bfc 600w, https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/44a01bfc 1000w" sizes="(max-width: 600px) 600px, 100vw" src="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/44a01bfc" loading="lazy" alt="Visual Foundations - Athena redesign - image 1 - student project"></p>
<p>This was the article. I ignored the navigation and just focused on the text in the article itself and a few of the extra bits of info from the 'Athena at a Glance' sidebar.</p>
<p> </p>
<p>This is my redesign:</p>
<p><img srcset="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/86a011db 600w, https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/86a011db 1000w" sizes="(max-width: 600px) 600px, 100vw" src="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/86a011db" loading="lazy" alt="Visual Foundations - Athena redesign - image 2 - student project"></p>
<p> </p>
<p>As I don't currently have Sketch, this was designed in Canva. This presents a few issues as it is not as easy to use gridlines and you don't have as much control over individual elements so the alignment and sizing aren't perfect.</p>
<p> </p>
<p>I really like this header/display font but struggled to find a body font that I was happy with. The main principles I tried to adhere to were:</p>
<p>- rule of 8 (text size, image height)</p>
<p>- warm colours for background, colours chosen through complementary palette on Adobe Color</p>
<p>- Hierarchy text sizes, san serif fonts</p>
<p>- Negative space</p>
<p>- Text alignment and line width</p>
<p>I think this still looks very basic and it could look more professional, I would love any feedback you could offer on how if I have correctly applied the principles from your course and how I could improve this article design.</p>
<p> </p>
<p>Thank you!</p>
<p> </p>
<p>Version 2 after feedback:</p>
<p><img srcset="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/4a9eb6d7 600w, https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/4a9eb6d7 1000w" sizes="(max-width: 600px) 600px, 100vw" src="https://static.skillshare.com/uploads/project/f55c99e9ecf8388de577a15150b020a7/4a9eb6d7" loading="lazy" alt="Visual Foundations - Athena redesign - image 3 - student project"></p>

Visual Foundations - Athena redesign

Empresa

Work With Us

Enseña con Nosotros

Tienda

Móvil