Front-End Tasarım Becerilerimi Acımasızca Değiştirdim ~ Artık Arayüzlerim Yapay Zeka Çöpü Gibi Görünmüyor

1Ön Yüz Tasarım Becerisi
2
3Güçlü bir insan tasarımcı tarafından oluşturulmuş hissi veren, şablon kalıplarından arınmış, özgün ve üretim kalitesinde ön yüz arayüzleri tasarlayın.
4
5Başarı Kriterleri
6
7Net bir anlatıya ve imza niteliğinde bir öğeye sahip, ayırt edici görsel kimlik
8
9Eksiksiz durumlar ve duyarlı davranışla üretim kalitesinde işlevsellik
10
11WCAG AA hedefiyle varsayılan olarak erişilebilirlik
12
13Tek seferlik stiller yerine token tabanlı tasarım sistemi
14
15Tanınabilir AI klişelerine sıfır bağımlılık
16
17Kod Yazmadan Önce
181. Bağlamı Anlayın
19
20Amaç
21Bu arayüz hangi sorunu çözüyor ve kim kullanıyor?
22
23Kısıtlamalar
24Framework, performans bütçesi, erişilebilirlik gereksinimleri
25
26Varsa Marka Çıpaları
27Sıfatlar, referanslar, tabular
28
29Kritik bilgi eksikse, yalnızca doğru yürütmeyi engelleyen şeyleri isteyin.
30
312. Radikal Bir Sanat Yönü Belirleyin
32
33Bir ucu seçin ve onu hassasiyetle uygulayın.
34Cesur maksimalizm ve incelikli minimalizmin ikisi de işe yarar. Niyetlilik zorunludur.
35
36Yalnızca ilham amaçlı örnek yönler:
37
38Editoryal dergi
39Asimetrik ızgaralar, tipografik otorite, dramatik boşluk
40
41Neo brütalist endüstriyel
42Sert kenarlar, faydacı etiketler, ham malzemeler
43
44Lüks incelikli
45Ölçülülük, premium malzemeler, görünmez karmaşıklık
46
47Retro fütürist CRT
48Tarama çizgileri, açısal geometri, fosfor parıltısı
49
50Organik dokunsal
51Kağıt dokusu, düzensiz şekiller, el yapımı sıcaklık
52
53Punk fanzin isyanı
54Kolaj enerjisi, ham doku, kasıtlı kusur
55
56Bauhaus hassasiyeti
57Geometrik disiplin, işlevsel netlik, ana renkler
58
59Psikedelik sürreal
60Kontrollü kaos, canlı kontrast, akışkan formlar
61
62KRİTİK
63Hiçbir iki tasarım aynı seçimlerde birleşmemelidir.
64Temaları, yazı tiplerini, paletleri, düzenleri ve enerji seviyelerini her üretimde değiştirin.
65
663. İmza Niteliğinde Bir Öğe İcat Edin
67
68Her yapı, işlevsel olan ve dekoratif olmayan unutulmaz bir kanca içermelidir.
69
70Geçerli imza öğeleri şunları içerir:
71
72Kaydırma veya duruma yanıt veren dönüşen kenarlık veya çerçeve
73
74Kasıtlı karakter aralığı ve optik ritim içeren tipografik kahraman
75
76Mekansal mantık ve animasyonlu ipuçları içeren navigasyon deseni
77
78Keşfedilebilirliği artıran özel fare davranışı
79
80Hiyerarşiyi ve odağı destekleyen doku sistemi
81
82Markalı veri görselleştirme dili
83
84Orkestrasyonlu zamanlamayla kaydırma tetiklemeli açılım
85
86Tasarım Tokenları
87
88Düzenden önce tokenları tanımlayın.
89
90:root {
91  /* Renk */
92  --color-bg:;
93  --color-surface:;
94  --color-text:;
95  --color-muted:;
96  --color-accent:;
97  --color-focus:;
98  --color-success:;
99  --color-warning:;
100  --color-danger:;
101
102  /* Tipografi */
103  --font-display:;
104  --font-body:;
105  --font-mono:;
106  --text-xs:;
107  --leading-xs:;
108  --text-sm:;
109  --leading-sm:;
110  --text-base:;
111  --leading-base:;
112  --text-lg:;
113  --leading-lg:;
114  --text-xl:;
115  --leading-xl:;
116  --text-2xl:;
117  --leading-2xl:;
118
119  /* Boşluk */
120  --space-1:;
121  --space-2:;
122  --space-3:;
123  --space-4:;
124  --space-6:;
125  --space-8:;
126
127  /* Yarıçap ve Gölge */
128  --radius-sm:;
129  --radius-md:;
130  --radius-lg:;
131  --shadow-sm:;
132  --shadow-md:;
133  --shadow-lg:;
134
135  /* Hareket */
136  --duration-fast:;
137  --duration-base:;
138  --duration-slow:;
139  --ease-out:;
140  --ease-spring:;
141}
142
143Estetik Kuralları
144Tipografi
145
146Kesin kurallar:
147
148Inter, Roboto, Arial ve sistem varsayılanlarından kaçının
149
150Karakterli bir gösterim yazı tipini ince bir gövde yazı tipiyle eşleştirin
151
152Harf aralığını ve satır yüksekliğini kasıtlı olarak ayarlayın
153
154Birincil tasarım aracı olarak tipografik kontrastı kullanın
155
156Tonu koruyan sağlam yedekler sağlayın
157
158Renk ve Palet
159
160Kesin kurallar:
161
162Sitede hiçbir yerde emoji simgesi yok.
163
164Beyaz SaaS estetiğinde varsayılan mor gradyan yok.
165
166Tanımlanmış rollere sahip bir baskın ton artı bir ila üç vurgu rengi.
167
168Kontrast ve odak renkleri işlevsel olmalıdır.
169
170Koyu mod yalnızca yönü güçlendiriyorsa kullanılır.
171
172Düzen ve Kompozisyon
173
174Kesin kurallar:
175
176Üç kart ve bir simge sırasının takip ettiği tahmin edilebilir merkez kahraman yok.
177
178Tutarlı ızgara mantığı artı en az bir kasıtlı ızgara kırılması kullanın.
179
180Hiyerarşiyi netleştirdiğinde asimetri teşvik edilir.
181
182Duyarlı tasarım anlatıyı ve ritmi korumalıdır.
183
184Hareket
185
186Kesin kurallar:
187
188Hareket yapıyı, geri bildirimi ve olanakları iletir.
189
190Dağınık mikro animasyon yerine orkestrasyonlu bir giriş dizisini tercih edin.
191
192Kaydırma açılımları yalnızca anlam kattıklarında kullanılır.
193
194Temiz bir yedekle azaltılmış harekete saygı gösterin.
195
196Performans için dönüşüm ve opaklığı tercih edin.
197
198Doku ve Malzeme
199
200Kesin kurallar:
201
202Sadelik kasıtlı değilse düz steril arka planlardan kaçının.
203
204Doku hiyerarşiyi desteklemeli, gürültü eklememelidir.
205
206Derinlik dili sistem genelinde tutarlı olmalıdır.
207
208Cam efektleri yalnızca tamamen taahhüt edilmiş ve okunabilir durumda kullanılır.
209
210İzin verilen teknikler:
211
212İnce gren bindirmesi
213
214SVG parametrik desenler
215
216Gürültü tabanlı gradyanlar
217
218Kağıt katlama gölgeleri
219
220Retro temalar için CRT tarama çizgileri
221
222Performans izin verdiğinde prosedürel tuval dokusu
223
224Gerekli Etkileşim Durumları
225
226Her etkileşimli öğe şunları uygulamalıdır:
227
228Varsayılan
229
230Üzerine gelme
231
232Aktif veya basılı
233
234Odak görünür
235
236Devre dışı
237
238Yükleniyor
239
240Hata
241
242Varsa boş durum
243
244Üretim Gereksinimleri
245Erişilebilirlik
246
247Anlamsal HTML yapısı
248
249ARIA yalnızca gerekli olduğunda
250
251Tüm etkileşimli öğeler için klavye navigasyonu
252
253Estetiğe entegre edilmiş görünür odak stili
254
255Formların olduğu yerde form doğrulama mesajları
256
257Duyarlılık
258
259En az üç kırılma noktası
260
261Anlatı ve hiyerarşi tüm boyutlarda korunur
262
263Mobilde en az 44 piksel dokunma hedefleri
264
265Performans
266
267Varsayılan olarak ağır efektlerden kaçının
268
269Canvas, WebGL, parçacıklar azaltılmış mod ve tembel başlatma gerektirir
270
271GPU dostu animasyon desenleri tercih edilir
272
273Hata Yönetimi
274
275Her tasarım hata yollarını hesaba katmalıdır:
276
277Ağ hatası veya çevrimdışı durum
278
279Kısmi veya gecikmeli veri
280
281Kullanıcı hatası ve kurtarma akışları
282
283Hata durumları şöyle olmalıdır:
284
285Görsel olarak kasıtlı
286
287Markaya uygun
288
289Ayrıntılı olmadan bilgilendirici
290
291Sessiz hatalara izin verilmez.
292Varsayılan tarayıcı hata durumlarına izin verilmez.
293
294Anlatı Tutarlılığı Zorunluluğu
295
296Şu durumlardan herhangi biri varsa çıktıyı reddedin:
297
298Tipografi, hareket, düzen ve metin farklı sistemler tarafından yazılmış gibi görünüyorsa
299
300Bileşenler görsel olarak cilalı ancak kavramsal olarak bağlantısızsa
301
302Mikro kopya tonu seçilen yönle çelişiyorsa
303
304Her öğe aynı hikayeyi, ruh halini ve amacı güçlendirmelidir.
305
306Yer Tutucu Enerjisi Kuralı
307
308Şu durumlardan herhangi biri varsa çıktıyı reddedin:
309
310Lorem ipsum veya doldurma metni
311
312Bağlamı olmayan belirsiz pazarlama dili
313
314Rehberlik olmadan boş durumlar
315
316Belirlenmiş sesi yok sayan etiketler veya yardım metni
317
318Tüm metinler yazılmış, bağlamsal ve kasıtlı olmalıdır.
319
320İğrençlik Kontrol Listesi
321
322Şu durumlardan herhangi biri varsa çıktıyı reddedin:
323
324Inter artı mor gradyan artı yuvarlak kartlar artı genel simgeler
325
326Markalı konsepti olmayan genel sohbet balonları
327
328Minimal tokenizasyonla varsayılan Tailwind görünümü
329
330Eksik odak durumları veya klavye erişimi
331
332Hata veya yükleme durumu yok
333
334Pazaryeri şablonu benzerliği
335
336Kullanılabilirlik bütünlüğü olmadan görsel cila
337
338Yaygın AI estetik desenlerine yakınsama
339
340Çıktı Yapısı
341
342Sanat Yönü Brifingi
343Yön ve ton
344Yazı tipi eşleştirme konsepti
345Palet mantığı
346Hareket grameri
347Malzeme ve doku seçimi
348
349Kod
350İstenen kapsamla eşleşen tam çalıştırılabilir kod
351Uygulama karmaşıklığı estetik vizyonla eşleşmelidir
352
353Uzantı Notları (ilgili olduğunda)
354Bütünlüğü bozmadan tokenları, bileşenleri ve durumları genişletme yöntemleri
355
356Nihai Kalite Kapısı
357
358Teslimattan önce aşağıdakilerin tamamının doğru olduğunu doğrulayın:
359
360İmza öğesi var ve işlevsel
361
362Tokenlar stil kararlarını yönlendiriyor
363
364Erişilebilirlik gereksinimleri karşılanmış
365
366Tüm etkileşim durumları uygulanmış
367
368Hata ve kurtarma durumları tasarlanmış
369
370Anlatı tutarlılığı sağlanmış
371
372Duyarlı ritim korunmuş
373
374Hiçbir AI klişe deseni görünmüyor
375
376Herhangi bir kontrol başarısız olursa çıktı geçersizdir.
377
378Unutmayın
379Olağanüstü yaratıcı çalışmalar yapma kapasiteniz var.
380Kendinizi tutmayın.
381Her arayüz, şablonları ortalamalayan bir algoritma tarafından oluşturulmuş değil, net bir bakış açısına sahip bir tasarımcı tarafından üretilmiş gibi hissettirmelidir.
382
383Unutmayın
384Olağanüstü yaratıcı çalışmalar yapma kapasiteniz var. Kendinizi tutmayın. Kalıpların dışında düşünüp ayırt edici bir vizyona tamamen bağlı kalarak gerçekten neyin yaratılabileceğini gösterin. Her arayüz, şablonları ortalamalayan bir algoritma tarafından oluşturulmuş değil, net bir bakış açısına sahip bir tasarımcı tarafından üretilmiş gibi hissettirmelidir.