edijs.eu - darba izpēte: no Figma līdz publicētam kodam

PROJEKTA PĀRSKATS

PROBLĒMA

Process ir tā portfolio daļa, ko visvieglāk apgalvot un visgrūtāk pierādīt. Ekrānbilde nerāda, kāpēc poga ir tur, kur tā ir, vai kas tika izmēģināts pirms tam.

MĒRĶIS

Uztaisīt portfolio, kas pats ir vērtējamais darbs. Ja lapa ir izdizainēta, no nulles uzrakstīta, divvalodīga, pieejama un ātra, apgalvojums ir pierādīts, pirms vēl kāds atver pirmo izpēti.

MANA LOMA

Viss, vienatnē: informācijas arhitektūra, pilns dizains Figmā, visi trīs breakpointi, kods, latviskais un angliskais saturs, kā arī pieejamības un drošības darbs.

14 lapas, divās valodās
44 dizaina tokeni
3 breakpointi
10k CSS rindas, bez ietvariem

LAPA, KO ŠĪ NOMAINĪJA

edijs.eu jau pastāvēja. Arī tā bija uzrakstīta no nulles, tā strādāja un gadu darīja savu darbu. Tai trūka sistēmas: katrs krāsas, izmēra un atstarpes lēmums dzīvoja tur, kur tika lietots. Neko nevarēja mainīt vienā vietā, un uz noteikumu, kas uzrakstīts vienā lapā, citur nevarēja paļauties.

Tieši ar to pārbūve sākās. Ne ar jaunu izskatu, bet ar struktūru, kurā izskats spēj mainīties, nesalūstot. Un līdz ar struktūru mainījās adresāts: no lapas par sevi uz lapu tam, kurš meklē dizaineru.

Iepriekšējā edijs.eu sākumlapas versija: portrets ekrāna vidū, virsraksts 'Hi there I am Edijs', zem tā sociālo tīklu ikonas un četras navigācijas saites — // pirms - lapa par mani: vārds, seja un saites uz sociālajiem tīkliem

Pārbūvētā edijs.eu sākumlapa: portrets pa kreisi, virsraksts 'I design clear digital experiences', lomu saraksts, divas darbības pogas un rīku josla lapas apakšā — // pēc - lapa lasītājam: ko es daru, vai esmu pieejams un ko darīt tālāk

Vecais stila fails salīdzinājumā ar pārbūvēto, skaitīts visā failā
Skaitīts visā stila failā	Vecā	Jaunā
Dizaina tokeni, definēti vienā vietā	3	44
Atsauces uz šiem tokeniem	6	913
Brīvas hex vērtības ārpus tokenu bloka	56	7
Noteikumi, kas uzspiesti ar !important	8	3
Samazinātas kustības bloki	0	7
Tastatūras fokusa noteikumi	0	9
Vietas, kur fokusa apmale bija izslēgta	5	0

Divas piezīmes. Visas trīs atlikušās !important deklarācijas sēž kustības samazināšanas blokā, kur pārrakstīt visu ir tieši tas, ko vajag. Un vecā lapa nebija paviršs darbs: plūstoši diapazoni tajā jau bija četrdesmit piecās vietās, tikai bez sistēmas, kas tos turētu kopā. Atšķirība, ko tabula mēra, nav ieguldītais darbs, bet vieta, kur lēmumi dzīvo.

VISPIRMS IZSTRĀDĀTS FIGMĀ

Katra šīs vietnes lapa tika uzzīmēta Figmā, pirms tapa pirmā rinda koda. Ne pāris efektīgi kadri, bet viss - 1440, 834 un 390 pikseļu platumā, ar komponentēm un stāvokļiem, kas to satur kopā.

Tokenu lapa pirms jebkura ekrāna. Krāsas, tipogrāfijas skala, noapaļojumi un ilgumi ieguva vārdus vispirms. Tāpēc ekrāni tapa no gatavas vārdnīcas, nevis no brīvas rokas ar saskaņošanu vēlāk.
Atsevišķa lapa pogu stāvokļiem. Kā poga izskatās parasti, ar peli virsū, ar fokusu un atslēgta - uzzīmēts, ne pieņemts. Stāvokļu tokeni stila failā, ieskaitot fokusa gredzenu - divi pikseļi ar divu pikseļu atkāpi - ir ņemti tieši no turienes.
Abas valodas vienos rāmjos. Latviešu valoda netika atstāta kā tulkošanas uzdevums beigās. Tieši agrīnā zīmēšana atklāja tos uzrakstus, kas neietilpst, un vairāki latviski tika saīsināti, nevis tulkoti burtiski.
Anotēts tā, it kā to nodotu kādam citam. Tad izrādījās, ka tas kāds cits esmu es pats - un tieši tas šajā projektā iemācīja visvairāk: kas nodošanu izturēja un kas ne.

edijs.eu Figma fails: viena lapa uzzīmēta trijos platumos blakus, tālāk pa labi stila lapa ar krāsu tokeniem, tipogrāfijas skalu un pogu stāvokļiem, pa kreisi slāņu panelis ar nosauktiem rāmjiem — // darba fails - viena lapa trijos platumos, blakus stila lapa ar tokeniem un pogu stāvokļiem

KĀ TAPA LĒMUMI

Šajā projektā es neveicu lietojamības pētījumu - nebija ne piecu dalībnieku, ne moderētu sesiju. Izdomāt tos nozīmētu sagraut tieši to, ko šī lapa grib pierādīt. Tālāk ir tas, kas lēmumus tiešām ietekmēja.

Divas auditorijas, abas īstas. Personāla atlases speciālists, kurš lapai atvēl kādas trīsdesmit sekundes un kuram jāsaprot, ko es daru, kur atrodos un vai varu strādāt jau tagad. Un klients, kurš grib redzēt gatavus darbus. Šīs divas vajadzības noteica visu sākumlapu, no statusa nozīmītes galvenē līdz darba soļiem zemāk.
Formāta robežas. Portfolio parasti ir galerija, un galerija labi rāda rezultātu. Procesu tā nerāda vienkārši tāpēc, ka tam vajag citu formu - tekstu, skaitļus un piemērus. Šī lapa ir mēģinājums to formu atrast.
Balstījos uz to, kas jau pārbaudīts. Lēmumi par hierarhiju, kontrastu, saprotamību un kognitīvo slodzi nāca no „Don't Make Me Think", „The Design of Everyday Things" un „Refactoring UI". Kur vadlīnijai bija konkrēts skaitlis, es lietoju skaitli.
Neformāla atgriezeniskā saite no vairākiem cilvēkiem. Tas nav pētījums, bet noderēja. Dažkārt tieši skats no malas ir tas vērīgākais.

SISTĒMA

Katra krāsa, atstarpe un fonta izmērs šajā lapā ir nosaukts tokens, kas definēts vienreiz stila faila augšā un zemāk izsaukts vairāk nekā astoņi simti reižu.

Krāsa dalīta pēc darba, ne pēc toņa. Violetais, kas pilda pogu, ar nolūku nav tas pats violetais, kas drīkst nest tekstu. Tokenu komentāri to pasaka tieši, un tāpēc vēlāk nesanāk paķert nepareizo.
Lapas malu nosaka viens tokens. Tas aug līdz ar logu, un visas sekcijas seko tam vienlaikus. Tāpēc nekas neaizslīd no līnijas platumā, ko neviens nav pārbaudījis - arī tādā, kāds nav uzzīmēts nevienā rāmī.
Sistēma ar zināmiem izņēmumiem. Piecas krāsas stila failā joprojām ir uzrakstītas ar roku, ne kā tokens. Zinu, kuras un kur - un kamēr zinu, tas ir parāds, ne haoss. Sarakstā tie ir nākamie.

KUR DIZAINS SATIKĀS AR PĀRLŪKU

Figma rāmis ir viens fiksēts platums. Pārlūks ir visi platumi. Būvējot savu dizainu, par nodošanu iemācījos vairāk nekā no jebkura saraksta, jo katra plaisa starp abiem nokrita uz mana galda, nevis izstrādātāja. Trīs no tām ir zemāk, ar risinājumu.

Kājene, kas salūza 45 pikseļu logā

FIGMĀ

Astoņas kājenes saites vienā centrētā rindā, uzzīmētas pie 1440px un vēlreiz pie 834px. Abos rāmjos tās ietilpa ar rezervi, tāpēc rinda izskatījās pabeigta.

PĀRLŪKĀ

Tieši virs planšetes breakpointa planšetes atstarpes izslēdzas un atgriežas darbvirsmas atstarpes, bet lapas mala vēl ir minimumā. Teksts izgāja pāri dalījuma līnijām abās pusēs.

// salūzis starp 835px un ~880px - logs, ko neviens fiksēts rāmis nesatur

risinājums: atstarpe starp saitēm kļuva plūstoša un aug līdz ar skatvietu. Ja arī ar to nepietiek, rinda lūzt - kā drošības tīkls.

Latviešu valoda nav teksta aizvietošana

FIGMĀ

Viens rāmju komplekts abām valodām - tikai teksts cits.

PĀRLŪKĀ

Latviešu vārdi ir garāki, un šauras rindas tos vairs nesatur. Izkārtojums, kas tur vienā valodā, otrā nav pārbaudīts - tas ir tikai vēl neredzēts.

risinājums: katru breakpointu tagad pārbaudu abās valodās un teksta garumus salīdzinu, nevis pieņemu. Vairākus uzrakstus latviski saīsināju, nevis tulkoju burtiski.

Viena apakšsvītra, kas negribēja palikt vietā

FIGMĀ

Katras lapas virsraksts beidzas ar mirgojošu termināļa kursoru, uzzīmētu kā pēdējā vārda daļu. Fiksētā rāmī tā ir tikai zīme, kas sēž tur, kur nolikta.

PĀRLŪKĀ

Kursors bija atsevišķs inline-block elements, lai to varētu animēt. Bet inline-block kaste ir likumīga vieta, kur pārlūks drīkst lauzt rindu - un pie noteiktiem platumiem apakšsvītra nokrita jaunā rindā viena pati, zem virsraksta, kuram tā pieder.

risinājums: astoņās apakšlapās kursors ir parasts inline teksts - mirgošana animē tikai caurspīdīgumu, un inline tekstu no iepriekšējā vārda atdalīt nevar. Sākumlapā kursors ceļas kopā ar savu vārdu, tāpēc kaste tur ir vajadzīga; tur nelaužama ir visa pēdējā rinda. Viens simptoms, divi risinājumi, jo cēlonis nebija viens.

Sākumlapas mobilais rāmis, kā tas uzzīmēts Figmā — // sākotnējais rāmis

Tas pats ekrāns mobilajā pārlūkā ar publicētajām atstarpēm un tipogrāfiju — // publicētā versija, pēc labojumiem

PIEEJAMĪBA - WCAG 2.2 AA MĒRĶIS

Šī lapa tiek mērīta pret WCAG 2.2 AA līmeni. Tas nebija pēdējais solis pirms publicēšanas, bet nosacījums katram lēmumam pa ceļam.

Kontrasts ir izrēķināts, ne novērtēts ar aci. Kur uzraksts guļ virs bildes, starp tiem ir tumšs pārklājums. Cik tumšam tam jābūt, nosaka bildes gaišākā vieta, ne kopiespaids - citādi uzraksts pazūd tieši tur, kur bilde ir visgaišākā.
Fokuss ir redzams, kustība ir izvēle. Fokusa gredzens ir tokens no Figma pogu lapas, un stila failā ir deviņi noteikumi, kas to zīmē. Nekur tas nav noņemts - vecajā lapā bija piecas tādas vietas. Animāciju izslēdz piecos blokos ikvienam, kurš sistēmā ir lūdzis samazināt kustību.
Virsrakstu izkārtojumā nav caurumu. Viens h1, viens h2 katrai sekcijai, h3 kartēm tajās. Sekciju etiķetes, kas bija stilizētas rindkopas, kļuva par īstiem virsrakstiem, tāpēc tas, kurš pārvietojas pa virsrakstiem, saņem to pašu struktūru, ko redz redzīgs apmeklētājs. Kur sekcijai nosaukuma tiešām nav, tas netika izdomāts.
Vilkšana nekad nav vienīgais ceļš. Karuseli pārslēdz arī pogas, video sliedē var iziet cauri ar Tab caur kartēm. Ne viens, ne otrs lapu neaiztur - kad vairs nav kurp iet uz sāniem, ritina lapa.

Lapas augša ar tastatūras fokusu uz pirmās saites: kreisajā augšējā stūrī violeta saite uz galveno saturu ar gaišu fokusa gredzenu ap to, aiz tās lapas galvene — // pirmais Tab - parādās saite uz galveno saturu, fokusa gredzens ir tokens

DROŠĪBA - CIK NO OWASP TIEŠĀM ATTIECAS

Statiskai lapai nav datubāzes, nav sesiju un nav servera koda, tāpēc lielākā daļa OWASP Top 10 uz to attiekties nevar. Četras kategorijas uz šādu lapu attiecas pa īstam, un šī sadaļa ir par tām.

Ievainojamas komponentes: nav kam būt ievainojamam. Nav ietvara, nav būvēšanas soļa, nav pakotņu pārvaldnieka, nav trešās puses JavaScript. Atkarību ir nulle, tāpēc nav piegādes ķēdes, kas zem lapas varētu nomainīties, un nav ielāpu, ar kuriem atpalikt.
Jaunā cilne nevar sniegties atpakaļ. Katrai saitei, kas atveras jaunā cilnē, ir rel="noopener", tāpēc atvērtā lapa nevar pārvirzīt to cilni, no kuras tā nāca.
Trešās puses ir īstā uzbrukuma virsma, tāpēc to gandrīz nav. Video sadaļa ved uz āru, nevis iegulst atskaņotāju: nav trešās puses iframe, nav tā liktu sīkdatņu, nav rāmim iedotu atļauju. Pāri paliek fontu piegādātājs un formas apstrādātājs, un abi ir nosaukti, nevis noklusēti.
Formā nav neviena noslēpuma. Sūtīšanu pa šifrētu savienojumu apstrādā ārējs pakalpojums, tāpēc marķējumā, ko var izlasīt jebkurš, nav ne atslēgas, ne paroles, ne pasta iestatījumu. Pret botiem tur ir slēpts lauks: cilvēks to neredz, bots to aizpilda, un tāda vēstule tālāk netiek.

KO ES NO TĀ PAŅĒMU

Uzbūvēt paša uzzīmēto mainīja to, kā es zīmēju. Figmā var izlemt, kā ekrāns izskatās. Kā tas uzvedas starp diviem platumiem, kā tas rīkojas, kad teksts kļūst garāks, un kas notiek, kad attēls neielādējas - tie ir jautājumi, uz kuriem dizaina fails neatbild un pārlūks atbild uzreiz.

Sistēma neatbild uz visu. Tā pasaka, kāda ir atstarpe un kāda krāsa, bet nepasaka, vai sadaļa vispār ir vajadzīga. Trīs reizes es uzbūvēju kaut ko tīri un pēc tam izmetu - tokeni bija pareizi, ideja nē.

Un apakšsvītra iemācīja mazāko, bet noderīgāko no trim lietām: vienam un tam pašam defektam divās lapās var būt divi dažādi cēloņi. Viens labojums abiem nozīmē, ka otrs atgriezīsies - tikai vēlāk un citā lapā.

Skatīt Figmā

Izveidosim projektu kopā Šobrīd pieejams jauniem projektiem sadarbība