February 9, 2017 - No Comments!

Tipy pro Sketch #1 – Organizace složek a vrstev

Pár jednoduchých, ale pro každodenní Workflow, dá se říct dost zásadních tipů. Jak organizovat soubory a složky nebo vrstvy.

Článek jsem nazval tipy pro Sketch, ale organizace souborů a složek je důležitá téměř všude, takže je důležité dodržovat třeba i ve Photoshopu či Adobe XD, ale i kdekoliv jinde. Nejhorší situace totiž nastává (a jistě se Vám to již několikrát stalo), když něco dokončíte, a následně obdržíte od klienta úpravy, a pokud jste si vrstvy a složky důkladně nepopsali, z následných úprav se stane noční můra, protože strávíte x-hodin nad tím, než zjistíte ve které složce je který objekt apodobně. Takže jdeme na to.

1.Používejte stránky (Pages)

Jako první věc je tuto funkci najít. Nachází se v levé horní části, těsně nad vrstvami. Jak můžete vidět na jednotlivých screenech, stránky si rozevřete malou dropdown šipkou na pravé horní straně lišty (zavřít můžete stejnou ikonou) a následně můžete + ikonou přidat další stránky, případně poklemáním na název stránky, vybranou stránku přejmenovat.

Tato funkce je opravdu hodně užitečná. Můžete si vytvořit nekonečně stránek a na každé stránce nekonečné množství artboardů. Pro představu, Stránku 1 (Page 1) si pojmenujete Wireframes a můžete zde vytvořit kompletní drátové modely, Stránku 2 (Page 2) si pojmenujete Guidelines, a zde se budete věnovat jen "Brandu" (barevnost, určení typografie, log a podobně, Stránku 3 (Page 3) si můžete pojmenovat jako Design a zde se věnovat jen vlastnímu designu aplikace, webu apodobně.

2. Organizace vrstev

Když designuji, vrstvy dávám do různých úrovní , abych se lépe orientoval ve struktuře. Nejvyšší úroveň značím do lomítek např. ( // Header // ), nižší úroveň do dvou dvouteček ( :: Navigation :: ), další již malými písmeny bez znaku ( logo ) a do této složky již vrstvu se samotným prvkem. Vše je jasně vidět na screenshotu.

 

3. Pojmenování prvků

Názvy prvků by měli být jasné a jednoduché a nejlépe používání anglických názvů,které jsou zavedené a rozumí jim téměř každý. Při každém designování je nejlepší popovídat s vývojáři, jakým způsobem chtějí mít soubory/prvky pojmenovány. Ale nejběžnější a nejpožívanější je používání prefixů. Opět příklad : bg_header, img_header, btn_header apod.

4. Využívejte symboly

Symboly jsou další skvělá feature ve Sketchi, která nám ušetří mnoho a mnoho času. Využívejte je v každém projektu. A o co jde? Pokud máte prvky, které se v projektu opakuji, jako jsou tlačítka, ikony, všemožné inputy (pole), formy apodobně, je důležité je uložit jako symbol. Dá se následně jednoduše vyvolat a použít, aby jste je nemuseli tvořit znovu a znovu a případně je následně přebarvovat.

A jak to celé uděláme? Vyberete objekt (např. tlačítko, pole ...) a pak máme dvě možnosti. Buďto v hornim panelu vybereme ikonu Create Symbol nebo druhá možnost přes pravou myš vybereme Create Symbol. Vyskočí nám okno (na screenu výše), kde zadáme název symbolu a zda chcceme symbol odeslat na Stránku (tip číslo #1) Symbols.

5. Stylování textů

Neustálé nastavování velikostí fontů, ať již pro Nadpisy (H1-H5), tak i odstavců (paragraphs), je strašně otravné, a zabírá šíleně času. Proto ve Sketchi existuje přiřazení textů k jednotlivým stylům, které si vytvoříte. Potom stačí jen psát texty, bez jakéhokoliv stylovaní, a výběrem stylu jim přiřadit velikost fontů, tloušťku (light, medium apod.), zarovnání, spacing apodobně. Založení stylu najdeme hned nad nabídkou výberu písma (fontu).

To by bylo k dnešním tipum vše, doufám, že pro nekoho budou alespon trochu uzitecne. Pokud mate nejake otazky k tematu, staci napsat do komentaru.

Published by: Maneken in Sketch, Tipy
Tags: , , , , , , , , ,

Leave a Reply