Topik bahasan:

  1. Pengantar: Pentingnya UI Style Guide
  2. Komponen Utama UI Style Guide
  3. Daftar 8 Persyaratan Utama untuk UI Style Guide
  4. Contoh

Penjelasan User Interface Standards dalam bentuk video dapat diakses pada:


PENGANTAR

Apakah Style Guide?

User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action. Style Guide juga sering merujuk pada aturan dan praktik terkait hal yang boleh dan tidak boleh dilakukan pada desain dibangun. Pada tingkat yang lebih holistik, Style Guide juga merupakan tempat yang tepat untuk menyatakan motif dan pernyataan misi sebuah perusahaan.

Style Guide adalah kumpulan modular semua elemen pada User Interface (UI) produk Anda, bersama dengan code snippet untuk developer yang akan di-copy dan di-paste sesuai kebutuhan untuk mengimplementasikan elemen-elemen itu. Termasuk didalamnya komponen UI seperti button, elemen form-input, navigation menu dan icon.


Mengapa Menggunakan Style Guide?

Style Guide digunakan untuk beberapa alasan:

  1. Konsistensi visual
  2. Konteks
  3. Kolaborasi
  4. Standardisasi kode
  5. Konsolidasi
  6. Orientasi karyawan baru

KONSISTENSI VISUAL
Pada tingkat paling dasar, Style Guide membantu Anda membuat desain yang kohesif (bersatu, berpadu, kompak) yang mencerminkan bahasa visual yang umum. Elemen visual design dan interaction design seperti warna, tipografi, animasi dan load time semuanya berkontribusi terhadap user experience yang terpadu.

KONTEKS
Style Guide yang baik tidak akan hanya memberikan gambaran visual dari halaman desain, tetapi menjelaskan mengapa desainer memilih desain tersebut.

KOLABORASI
Sebuah tim perlu memiliki manual untuk referensi, yang ditetapkan untuk setiap anggota tim, yang akan memastikan bahwa semua orang berada pada acuan yang sama. Style Guide juga merampingkan komunikasi melalui pembuatan kosakata tunggal (misalnya mendefinisikan apa yang dimaksud dengan “widget” atau “module”).

STANDARDISASI CODE
Style Guide membantu membuat standard penulisan code (X)HTML, CSS atau JavaScript, sehingga desainer dan developer dapat melihat apakah desain yang baru menyimpang dari standard yang ditetapkan, dan dengan cepat menemukan apakah sesuatu yang sudah dituliskan dapat dikembangkan dengan mudah.

KONSOLIDASI
Desainer hanya perlu mencari satu tempat untuk referensi semua komponen.

ORIENTASI KARYAWAN BARU
Daripada berulangkali mengajarkan standard ini setiap ada karyawan baru, Anda dapat memberikan Style Guide untuk menjadi referensi mereka.


KOMPONEN UTAMA STYLE GUIDE

Komponen utama sebuah Style Guide adalah:

  1. Overview/ mission statement
  2. Layout (atau grid)
  3. Typography
  4. Color
  5. Media treatment
  6. Branding
  7. Navigation
  8. Iconography
  9. Naming convention & file directories
  10. UI patterns
  11. Writing guidelines
  12. Code snippets

1. OVERVIEW / MISSION STATEMENT

Setiap pekerjaan penting membutuhkan pengantar. Sebelum menyelam lebih dalam ke urusan fakta dan angka, bagian pertama sebuah Style Guide adalah tempat paling baik untuk menyajikan gambaran tujuan Anda atau pernyataan misi produk atau brand. Ingatlah bahwa salah satu tujuan membuat Style Guide adalah untuk menyatukan tim, sehingga menghadirkan misi atau filosofi sejak awal akan membuat semua orang dalam tim berjalan pada arah yang benar.

Beberapa topik yang mungkin dibahas pada bagian ini termasuk web/ aplikasi/ perusahaan:

  • Misi menyeluruh
  • Kepribadian
  • Strategi konten
  • Filosofi atau motto

Bagian ini akan menjadi tempat terbaik untuk setidaknya menyebutkan audiens yang menjadi target Anda, style desain, dll. Contoh: Atlassian Design.

Mission Statement pada Style Guide Attlasian Design

2. LAYOUT (OR GRID)

Layout layar Anda harus disusun dengan cermat, dan terlebih lagi elemen-elemennya harus tetap konsisten pada setiap halaman. Bagian layout dan grid harus menunjukkan:

  • Nilai untuk border margin
  • Nilai untuk jarak ruang antar elemen yang berbeda (misalnya antara teks dan gambar, antara header dan top navigation bar, dll)
  • Penentuan posisi elemen global (logo, informasi copyright, dll)
  • Prosedur untuk kolom, jika berlaku (berapa banyak kolom, lebar kolom, spasi jarak antar kolom, dll).
Contoh Pengaturan Grid pada Style Guide di Website Drupal (halaman 1)
Contoh Pengaturan Grid pada Style Guide di Website Drupal (halaman 2)

3. TYPOGRAPHY

Dua elemen dasar dari tipografi adalah size dan font. Heading harus memiliki satu size dan font, subtitle punya size dan font yang berbeda, dan elemen-elemen lainnya juga (caption gambar, informasi copyright, teks menu, list, dll). Praktik terbaik yang umum disarankan adalah Simplicity atau kesederhanaan dalam tipografi demi Legibility dan Readability.

Contoh pengaturan tipografi dalam Style Guide

4. COLOR

Skema warna harus tepat, dengan warna tertentu digunakan hanya untuk obyek tertentu (misalnya button call-to-action harus berwarna hijau, background harus berwarna krem) dan batasan tentang warna mana yang dapat digunakan bersebelahan. Bidang yang paling penting pada bagian warna adalah dalam tugas menentukan warna yang tepat untuk digunakan.

Pengaturan Color pada Style Guide Website Lonely Planet

5. MEDIA TREATMENT

Setiap perusahaan atau web ingin menangani gambar dan video dengan cara tertentu. Topik paling umum di bagian ini adalah proporsi dan rasio untuk media Anda, dibagi berdasarkan jenis (seperti grafik dalam banner dibandingkan dengan yang ada dalam konten). Ada kalanya perlu untuk membahas jenis konten yang digunakan dalam media. Apakah penting bawah semua konten Anda harus children-friendly? Bagian ini menjadi tempat yang baik untuk memperkuat guideline apapun yang membuat perusahaan Anda nyaman untuk mempublikasikannya.

Contoh pengaturan penggunaan media dalam website

6. BRANDING

Secara umum perusahaan memilih untuk membuat bagian branding yang lebih kecil dalam UI Style Guide, karena panduan rinci terkait branding dapat dibahas khusus pada dokumen yang berbeda yang disebut Branding Style Guide. Pada bagian ini dibahas tentang penggunaan logo. Sertakan bagian yang menunjukkan penggunaan logo yang tepat, dan kesalahan umum yang harus dihindari (dengan contoh).

The New School Identity Guidelines menampilkan halaman demi halaman aturan tentang bagaimana nama mereka disajikan secara visual. Dalam contoh di bawah ini, mereka secara langsung menjelaskan tentang ukuran dan gaya logo yang tepat. Selain itu, mereka juga menguraikan aturan mengenai warna logo, penempatan, dan cara penanganannya di berbagai media.

Contoh pengaturan branding pada Style Guide The New School

7. NAVIGATION

Bagian ini mencakup semua aturan terkait navigasi, seperti penggunaan search box, sidebar, link (jika tidak tercakup di bagian tipografi), menu dan drop-down (misalnya berapa perkiraan item yang sesuai untuk disertakan dalam bagian menu atau drop-down).

Contoh 1 pengaturan navigasi pada Style Guide
Contoh 2 pengaturan navigasi pada Style Guide

8. ICONOGRAPHY

Bahkan jika Anda tidak menampilkan berbagai macam icon, Anda masih perlu mendefinisikannya dengan jelas karena icon adalah salah satu elemen desain yang paling sering muncul. Bagian iconography dapat menampilkan semua icon yang tersedia di satu tempat untuk pemilihan yang lebih mudah, cara pengaturan (misalnya ukuran, posisi ditempatkan, dll) dan bahkan termasuk coding untuk referensi yang cepat.

Contoh icon-icon yang ditampilkan pada Style Guide

9. NAMING CONVENTION & FILE DIRECTORIES

Direktori file Anda dapat menjadi berantakan jika semua orang mengaturnya sesuai dengan kemauan mereka masing-masing. Buatlah outline yang tepat untuk struktur file dan folder Anda, serta konvensi penamaan yang terstandardisasi (terutama untuk versioning). Pastikan Anda juga menggunakan terminologi yang konsisten dalam Style Guide Anda. Contohnya jangan menyebut “sidebar” sebagai “widget” pada bagian yang berbeda.

Contoh Pengaturan Naming Convention

10. UI PATTERNS

Semakin familiar seorang desainer dengan UI pattern, semakin baik mereka menggunakannya. Tunjukkan UI pattern Anda dan sebutkan modifikasi atau variasi khusus untuk masing-masingnya. Ini juga merupakan kebiasaan yang direkomendasikan untuk menentukan apakah ada pattern yang tumpang tindih atau bertentangan.

Contoh UI Pattern pada Style Guide

11. WRITING GUIDELINES

Bagian ini terkait dengan isi tulisan, bukan tipografi. Pada dasarnya, ada beberapa bidang pada bagian ini, meskipun Anda dapat memilih salah satu atau semuanya, tergantung dari kebutuhan Anda:

  • Guideline subyektif. Mencakup jenis konten dan cara penanganannya. Bagian ini dapat menguraikan tone dan voice, termasuk target audiens yang ingin diajak bicara.
  • Guideline obyektif. Mencakup bahasa tertentu dan pilihan tata bahasa (misalnya ejaan kata-kata yang disesuaikan), kapan harus menuliskan angka, dll.
  • Bahasa yang disarankan/dilarang. Beberapa brand memilih untuk mengidentifikasikan diri mereka sendiri atau menghindari kata atau frase tertentu.
  • Bahasa yang sesuai. Bagian ini dapat memperkuat bahasa apa yang cocok dan tidak pantas, termasuk tingkat usia, bahkan kata-kata yang tidak baik.
Contoh Pengaturan Writing Guidelines pada Style Guide Mailchimp

12. CODE SNIPPET

Elemen Style Guide yang paling penting: potongan code yang dapat di-reuse (digunakan kembali). Coding tidak harus berupa bagian individual. Gunakan metode apapun yang dapat membantu untuk developer Anda. Style Guide harus mencakup class CSS dan ID dalam contoh potongan code. Idealnya para developer harus dapat copy dan paste bagian yang mereka butuhkan.

Contoh Code Snippet

DAFTAR 8 PERSYARATAN UTAMA UNTUK UI STYLE GUIDE

Delapan persyaratan dalam pembuatan UI Style Guide, yaitu:

  1. Daftar isi yang membagi komponen ke dalam kategori yang mudah ditemukan.
  2. Menggunakan layout yang responsif atau sistem grid untuk menempatkan elemen UI umum.
  3. Color palette (dalam format yang sesuai, misalnya HEX untuk Web).
  4. Style tipografi (misalnya judul H1, body text, caption untuk foto), yang harus mencakup name, size, width, height dan konteks penggunaan yang sesuai untuk style tersebut.
  5. Deskripsi konteks penggunaan yang tepat: Kapan menggunakan satu komponen tertentu?
  6. Code snippet.
  7. Spesifikasi untuk implementasi, termasuk penentuan posisi (positioning) dan jarak informasi (spacing).
  8. Apa yang dapat dilakukan dan yang tidak dapat dilakukan untuk elemen tersebut.

Persyaratan ini dapat disesuaikan dengan kebutuhan tim pengembang website atau aplikasi. Pada dua gambar di bawah ini dberikan contoh UI Style Guide untuk aplikasi Markopi.

Contoh Style Guide untuk Aplikasi Markopi (Riyanthi Sianturi)
Contoh Style Guide untuk Aplikasi Markopi (Riyanthi Sianturi)

REFERENSI



64 thoughts on “User Interface Standards

  1. Nama : Zico Andreas Aritonang
    NIM : 11419049
    Kelas : 42TRPL2

    UI Style Guide atau Front-End Style Guide merupakan dokumen komprehensif yang melacak semua elemen
    berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon,
    hingga jumlah maupun bentuk-bentuk tombol.

    UI Standard digunakan karena:
    – Konsistensi Visual
    – Konteks
    – Kolaborasi
    – Standardisasi Kode
    – Konsolidasi
    – Orientasi Karyawan Baru

    Komponen Utama Style Guide secara umum ada 12, yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  2. Nama : Timothy
    NIM : 11419053
    Kelas : 42TRPL2
    User Interface Standards
    UI Style Guide(Front End Style Guide) adalah Dokumen komprehensif yang melacak
    semua elemen berulang atau sebuah proyek.Pada level yang lebih tinggi lagi UI
    Style Guide ini memuat atau menyatakan motif atau pernyataan misi sebuah Perusahaan.
    Secara Umum UI Style Guide ini berisi kumpulan elemen elemen User Interface yang
    ditampilkan secara modular.

    Mengapa menggunakan UI Standards
    1.Konsistensi Visual
    2.Konteks
    3.Kolaborasi
    4.Standardisasi kode
    5.Konsolidasi
    6.Orientasi Karyawan Baru
    Pada tingkat dasar Style Guide ini membantu Tim Desain untuk membuat sebuah panduan
    yang kohesif(padu dan kompak untuk mencerminkan bahasa visual yang umum)

    Komponen utama Style Guide
    1.Overview/mission statement(berisi misi secara keseluruhan dan bagaimana kepribadian
    sebuah Perusahaan,filosofi,motto)
    2.Layout/grid(berisi standard-standard tiap halaman)
    3.Typography
    4.Color(berisi penentuan warna)
    5.Media Treatment(Mengatur setiap media media yang digunakan)
    6.Branding(Apa yang boleh atau tidak boleh saat kita menggunakan logo)
    7.Navigation(Bagaimana kita menyusun navigasi navigasi)
    8.Iconography
    9.Naming convention & file directories
    10.UI patterns
    11.Writing guidelines(Pengaturan pengaturan cara menyampaikan atau cara berbahasa)
    12.Code snippets(Berisi potongan potongan code yang bisa di re-use)

    Persyaratan utama Style Guide
    1.Memiliki Daftar isi
    2.Layout yang komprehensif
    3.Palet warna produk
    4.Style tipografi
    5.Deskripsi konteks penggunaan
    6.Code Snippet
    7.Spesifikasi untuk implementasi,termasuk positioning,spacing
    8.Apa yang dapat dan tidak dapat dilakukan

  3. Nama :Josua Simbolon
    Nim : 11419032
    Kelas : 42TRPL1

    User Interface Standard Sering atau yang disebut dengan User Interface Styleguide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon, bentuk-bentuk tombol, aturan-aturan dalam proses pembangunan design.

    Ada 12 Komponen Utama Style Guide :
    1. Overview/mission statement : menyatakan gambaran misi/tujuan produk.
    2. Layout (or grid)
    3. Typography : setiap halaman memiliki standards yang sama.
    4. Color : penentuan warna untuk produk.
    5. Media treatment
    6. Branding : apa yang boleh dan dilarang dalam menggunakan logo.
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines : cara bertutur yang tepat terhadap customer.
    12. Code snippets : potongan code yang dapat di-reuse.

  4. Nama : Edwin G Hutagalung
    NIM : 11419009
    Prodi : 42TRPL1

    User Interface Style Guide atau Front End Style Guide adalah dokumentasi komprehensif yang melacak semua elemen berulang untuk semua proyek. Dikarenakan mengacu pada aturan yang di perbolehkan / tidak diperbolehkan untuk di gunakan dalam pembuatan sebuah desain.

    Alasan UI Standards digunakan :
    1) Konsistensi Visual
    2) Konteks
    3) Kolaborasi
    4) Standardisasi Kode
    5) Konsolidasi
    6) Orientasi karyawan baru

    Komponen Utama Style Guide secara umum ada 12, yaitu :
    1) Overview/Mission Statement
    2) Layout
    3) Typography
    4) Color
    5) Media Treatment
    6) Branding
    7) Navigation
    8) Iconography
    9) Naming Convention & File Directories
    10) UI Patterns
    11) Writing Guidelines
    12) Code Snippets

  5. Nama : Fretty L M Silalahi
    NIM : 11419057
    Prodi : 42TRPL2

    User Interface Style Guide atau Front End Style Guide adalah dokumentasi komprehensif yang melacak semua elemen berulang untuk semua proyek. Hal ini mengacu pada aturan- aturan atau praktek yang boleh dan tidak boleh dilakukan dalam proses pembangunan desain.

    Alasan UI Standards digunakan :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  6. Nama : Meyliza Veronica Siregar
    NIM : 11419058

    User Interface Standards atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek dan merupakan kumpulan UI produk dengan code yang akan di-copy dan di-paste sesuai kebutuhan untuk implementasi elemen.

    Alasan mengapa menggunakan UI Standars
    – Konsistensi visual
    – Konteks
    – Kolaborasi
    – Standardisasi kode
    – Konsolidasi
    – Orientasi karyawan baru

    Komponen Utama Style Guide :
    1. Overview/mission statement : menyatakan gambaran misi/tujuan produk.
    2. Layout (or grid)
    3. Typography : setiap halaman memiliki standards yang sama.
    4. Color : penentuan warna untuk produk.
    5. Media treatment
    6. Branding : apa yang boleh dan dilarang dalam menggunakan logo.
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines : cara bertutur yang tepat terhadap customer.
    12. Code snippets : potongan code yang dapat di-reuse.

  7. Nama : Clarita Butarbutar
    NIM : 11419067

    User Interface Standard atau User Interface Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action dan mengacu pada aturan yag boleh atau tidak boleh kita lakukan dalam proses pembangunan desain yang dibangun.

    Alasan menggunakan User Standards karena memiliki konsistensi visual, konteks,kolaborasi, standarisasi kode, konsolidasi, orientasi karyawan baru.

    Komponen Utama dari style guide ada 12 yaitu:
    1. Overview/mission statement
    2. layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention and file directories
    10 UI patterns
    11. Writing guidenes
    12. Code snippets

    Ke 12 komponen tidak harus diterapkan secara keseluruhan, sesuaikan dengan kebutuhan tim dan developer terkait kebutuhan dalam pengembangan aplikasi tetapi juga harus membuat informasi penting yang dibutuhkan tim.

  8. User Interface Style Guide atau Front End Style Guide adalah dokumentasi komprehensif yang melacak semua elemen berulang untuk semua proyek. Hal ini mengacu pada aturan- aturan atau praktek yang boleh dan tidak boleh dilakukan dalam proses pembangunan desain.
    UI Standard digunakan karena:
    – Konsistensi Visual
    – Konteks
    – Kolaborasi
    – Standardisasi Kode
    – Konsolidasi
    – Orientasi Karyawan Baru
    Komponen utama Style Guide ada 12 yaitu overview/ mission statement, layout, typografi, penentuan warna, media threatment, branding, navigasi, iconografi, naming convention and file directories, UI patterns, writing guidelines, dan code snippets.
    Ke-12 komponen utama Style guide ini tidak harus dibuat, tapi dibuat sesuai dengan kebutuhan tim desain dan developer. Meskipun singkat, namun harus memuat informasi yang dibutuhkan oleh tim.

  9. 1. User Interface Standard

    Pentingnya UI Standars
    -> 1. Document komprehensif yang melacak semua element berulang untuk sebuah proyek

    2. Merujuk Pada Aturan dan praktik yang disarankan.
    Mengapa Kita menggunakan UI Standars?

    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan baru

    3. Komponen Utama Style Guide :

    1. Overview/mission Statement
    2. Layout (or grid)
    3. typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code Snippets

    4. Persyaratan Utama Style Guide:

    1. Memiliki Daftar isi
    2. Layout yang Komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. deskripsi konteks penggunaan
    6. code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. apa yang dapat dan tidak dapat dilakukan

  10. Nama : Edwin Immanuel Damanik
    NIM : 11419011
    Kelas : 42TRPL1

    UI Style Guide atau Front End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk proyek, mulai dari branding, pemakaian icon, jumlah maupun bentuk tombol.

    UI standards digunakan karena :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Persyaratan dalam Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan oleh element-element yang ada di UI Style Guide.

  11. Nama : Agus Rokyanto S
    NIM : 11419045
    Kelas : 42TRPL2

    User Interface Style Guide (Front-End Style Guide) : menurut kesimpulan saya ui standard ini adalah sebuah aturan atau perintah yang harus dilakukan dan tidak dilakukan oleh pembangun untuk mencapai kenyamanan pengguna dan pengembang melalui konsistensi ui, code, desain visual, dan aturan aturan lainnya
    tim pengembang dan tim desain hanya perlu memasukkan komponen yang di perlukan atau dibutuhkan saja
    komponen Style Guide:
    1. overview/mission statement
    2. layout (or grid)
    3. typography
    4. color
    5. media treatment
    6. branding
    7. navigation
    8. iconography
    9. naming convention & file directories
    10. ui patterns
    11. writing guidelines
    12. code snippets

  12. Nama : Mikhael Hutapea
    NIM : 11419037
    Kelas : 42TRPL 2

    UI Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek. UI Style Guide ini merujuk pada aturan dan praktik yang disarankan.

    Alasan menggunakan UI Standards
    1. Konsistensi visual = membantu membuat panduan yang kohesif
    2. Konteks = alasan desainer memilih desain
    3. Kolaborasi = punya 1 referensi yang menjadi acuan
    4. Standarisasi kode = potongan code yang bisa di copy saat bekerja berkolaborasi
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen utama UI Standards
    1. Overview
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention dan file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code snippets

    Tidak ada komponen baku yang mengharuskan pengimplementasian ke-12 komponen tersebut. Kita bisa menyesuaikan dengan kebutuhan pengembangan. Tetapi harus memuat informasi yang dibutuhkan tim.

  13. Nama : John Ryan Siallagan
    NIM : 11419013
    Kelas : 42TRPL1

    User Interface Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, bahkan sering mengacu pada aturan yang boleh dan tiadk boleh dilakukan dalam proses pembangunan design. Pada UI Style Guide, kumpulan elemen-elemen UI yang bertampil modular berada disini.

    Alasan UI Standards digunakan, karena ada:
    – Konsistensi Visual => Membantu desain agar kohesif, unt mencerminkan bahasa visual yang umum.
    – Konteks => Menjelaskan mengapa designer memilih desain tersebut.
    – Kolaborasi => Meminimalisirkan komunikasi karena memiliki pola pengerjaan atau acuan yang sama.
    – Standardisasi Kode
    – Konsolidasi => perlu mencari satu acuan dalam pembuatan desain
    – Orientasi Karyawan Baru => Mempersingkat waktu dengan acuan perancangan UI

    Komponen Utama pada Style Guide :
    – Overview/Mission Statement => berisi misi dari produk/project
    – Layout
    – Typography
    – Color
    – Media Treatment
    – Branding
    – Navigation
    – Iconography
    – Naming Convention & File Directories => Dilakukan penetapan standard bentuk dari direktori
    – UI Patterns => Pengisian standart dari pola yang dgunakan
    – Writing Guidelines
    – Code Snippets

    Syarat-syarat Utama Style Guide :
    – Memiliki daftar isi
    – Layout yang komprehensif
    – Palet warna produk
    – Style tipografi
    – Code snippet
    – Spesifikasi untuk implementasi termasuk positioning dan spacing
    – Apa yang dapat dan tidak dapat dilakukan

  14. Nama : Suryanto Ray S Panjaitan
    NIM : 11419031
    Prodi : 42 TRPL 1

    User Interface Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, yang mengacu pada aturan-aturan atau praktek-praktek yang boleh dan tidak boleh pada design.

    UI Standard digunakan karena:
    – Konsistensi Visual
    – Konteks
    (alasan mengapa desainer memilih desain tersebut)
    – Kolaborasi
    – Standardisasi Kode
    – Konsolidasi
    – Orientasi Karyawan Baru

    Komponen Utama pada Style Guide :
    – Overview/Mission Statement
    – Layout
    – Typography
    – Color
    – Media Treatment
    – Branding
    – Navigation
    – Iconography
    – Naming Convention & File Directories
    – UI Patterns
    – Writing Guidelines
    – Code Snippets

  15. Nama : Irvandi Pransena Hutapea
    NIM : 11419008
    Kelas : 4@ TRPL 1
    Apakah Style Guide?
    User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif
    yang melacak semua elemen berulang untuk sebuah proyek,mulai dari aturan branding hingga
    jumlah untuk tombol call to action.
    Style Guide adalah kumpulan modular semua elemen pada User Interface (UI) produk Anda, bersama
    dengan code snippet untuk developer yang akan di-copy dan di-paste sesuai kebutuhan untuk
    mengimplementasikan elemen-elemen itu.

    Mengapa Menggunakan UI Standards
    1. Konsisten visual
    Pada tingkat paling dasar, Style Guide membantu Anda membuat desain yang kohesif
    (bersatu, berpadu, kompak) yang mencerminkan bahasa visual yang umum
    2. Konteks
    Style Guide yang baik tidak akan hanya memberikan gambaran visual dari halaman desain,
    tetapi menjelaskan mengapa desainer memilih desain tersebut.
    3. Kolaborasi
    Sebuah tim perlu memiliki manual untuk referensi, yang ditetapkan untuk setiap anggota tim,
    yang akan memastikan bahwa semua orang berada pada acuan yang sama.
    4. Standardisasi kode’
    Style Guide membantu membuat standard penulisan code (X)HTML, CSS atau JavaScript, sehingga desainer
    dan developer dapat melihat apakah desain yang baru menyimpang dari standard yang ditetapkan, dan dengan cepat
    menemukan apakah sesuatu yang sudah dituliskan dapat dikembangkan dengan mudah.
    5. Konsolidasi
    Desainer hanya perlu mencari satu tempat untuk referensi semua komponen.
    6. Orientasi karyawan baru
    Daripada berulangkali mengajarkan standard ini setiap ada karyawan baru, Anda dapat memberikan Style Guide untuk menjadi referensi mereka.
    Komponen Utama UI Style Guide
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  16. Nama : Mei Pane
    NIM : 11419006
    Kelas : 42 TRPL 1

    User Interface Standars

    User Interface Style Guide atau Front-End Style Guide merupakan dokumen komperehensif yang digunakan untuk melacak elemen secara berulang pada sebuah proyek dengan aturan dan praktik yang sesuai dengan yang disarankan dalam proses pembangunan desain.
    Berikut alasan mengapa harus UI Standars:
    1.Konsistensi visual
    2.Konteks
    3.Kolaborasi
    4.Standardisasi kode
    5.Konsolidasi
    6.Orientasi karyawan baru

    Komponen Utama dari UI Style Guide sebagai berikut:
    1.Overview/Mission Statement
    2.Layout
    3.Typography
    4.Color
    5.Media Treatment
    6.Branding
    7.Navigation
    8.Iconography
    9.Naming Convention & File Directories
    10.UI Patterns
    11.Writing Guidelines
    12.Code Snippets

    Selain alasan dan komponen dari UI Style Guide, ada juga syarat untuk membuatnya, yaitu Memiliki daftar isi, layout yang komprehensif, palet warna produk, style tipografi, deskripsi konteks penggunaan, code snippet, spesifikasi untuk implementasi termasuk positioning, spacing dan yang terakhir adalah apa yang bisa/tidak bisa lakukan oleh element UI style Guide.

  17. Nama : Lastri Rohani Nababan
    NIM : 11419060
    Kelas : 42 TRPL 2

    User Interface Style Guide atau front end style guide adalah dokumen komprehensif yang melacak semua elemen yang berulang dari suatu proyek, seperti penggunaan icon, aturan branding, dan bentuk tombol.
    Alasan menggunakan UI Standards, yaitu
    1. Konsistensi visual
    2. Konteks. Tidak hanya memberikan gambaran secara visual dari halaman-halaman desain, tetapi memberikan alas an memilih design tersebut.
    3. Kolaborasi. Mempunyai referensi yang dilakukan secara Bersama dengan satu tim, sehingga dapat meminimalisir suati komunikasi.
    4. Standardisasi kode. Potongan code yang dapat dicopy ketika mengerjakannya secara kolaborasi, meskipun mengerjakan halamn-halaman yang berbeda, tetapi designnya akan tetap sama.
    5. Konsolidasi. Mempunai satu referensi untuk menjadi acuan pembuatan suatu design.
    6. Orientasi karyawan baru

    Komponen utama Style Guide
    1. Overview/mission statement
    2. Layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming cinvention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  18. Nama : Ares J. M. Pardosi
    NIM : 11419062
    Kelas : 42 TRPL 2

    UI Style Guide atau Front-End Style Guide didefenisikan sebagai dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon, hingga jumlah maupun bentuk-bentuk tombol.
    Style Guide juga sering mengacu kepada aturan – aturan atau praktek – praktek yang boleh dan tidak boleh dilakukan dalam proses pembangunan desain.
    Ada 6 alasan mengapa kita perlu mengunakan UI Standards
    1. Konsistensi Visual
    2. Konteks
    (alasan mengapa desainer memilih desain tersebut)
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan Baru
    Selain itu ada 12 Komponen utama Style Guide, yaitu overview/ mission statement, layout, typografi, penentuan warna, media threatment, branding, navigasi, iconografi, naming convention and file directories, UI patterns, writing guidelines, dan code snippets.
    jadi sebenarnya ke-12 tidak harus di buat, tapi kita menyesuaikan dengan kebutuhan tim desain dan juga tim developer terkait kebutuhan pengembangan aplikasi. Tapi harus memuat informasi yang memang dibutuhkan oleh tim.

    Adapun Syarat-syarat Utama Style Guide , yaitu :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan oleh element-element yang ada di UI Style Guide

  19. Nama : Daniel Naibaho
    NIM : 11419047
    Kelas : 42TRPL2

    User Interface Style Guide atau Front End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon, maupun bentuk-bentuk tombol.
    Alasan menggunakan UI Standards :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Ke 12 komponen tidak harus diterapkan seluruhnya tetapi disesuaikan dengan kebutuhan tim dan developer.

  20. Nama : Ervina Sipahutar
    NIM : 11419066
    Kelas : 42 TRPL 2

    User Interface Standard merupakan sebuah dokumen komprehensif yang melacak semua elemen berulang dan memuat standardnya yang kemudian menjadi acuan dalam pengembangan desain User Interface.

    Alasan menggunakan UI Standards
    1. Konsistensi visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen utama Style Guide
    1. Overview/mission : berisikan tujuan misi produk atau brand yang ditandai dengan adanya filosofi serta motto
    2. Layout (or grid) : seperti membuat standard batas-batas margin dan penggunaan style, layout disusun dengan sistem grid
    3. Typography : membuat acuan untuk penggunaan font yang sama di setiap halamannya. Gunakan konsep simplicity (kesederhanaan), mudah dibaca, dan mudah dikenali
    4. Color : contohnya pengklasifikasian warna button berdasarkan fungsinya
    5. Media treatment : acuan penggunaan media (baik jenis serta ukurannya)
    6. Branding : pengaturan logo
    7. Navigation : acuan penyusunan navigasi (seperti side bar, link)
    8. Iconography : acuan penggunaan icon yang sama
    9. Naming convention & file directories : penyeragaman semua nama icon, file, directory, serta fungsi untuk kemudahan sampai dengan pembuatan code
    10. UI patterns : seperti standard acuan pengaturan button, pola penulisan UI dan penulisan codenya
    11. Writing guidelines : penggunaan bahasa dalam informasi website yang disesuaikan pada taget user
    12. Code snippets : potongan code yang dapat di reuse sehingga dapat di-copy untuk keseragaman halaman website.

  21. SAHAT HUTAURUK
    11419010 / 42TRPL1

    UI Style Guide (Front-End Style Guide)
    adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon, hingga jumlah maupun bentuk-bentuk tombol. UI Style Guide berisi elemen-elemen interface yang ditampilkan secara modular.

    Alasan perlu menggunakan UI Standards
    1. Konsistensi Visual
    -> membantu tim design untuk membuat sebuah panduan yang kohesif untuk mencerminkan bahsa visual yang umum
    2. Konteks
    -> Alasan designer memilih suatu design tertentu
    3. Kolaborasi
    -> Satu acuan dalam suatu tim untuk meminimalisir komunikasi
    4. Standardisasi kode
    -> Potongan code untuk di-copy jika berkolaborasi dalam tim dalam mengerjakan halaman berbeda tapi design yang sama
    5. Konsolidasi
    -> punya satu referensi untuk menjadi acuan dalam pembuatan design
    6. Orientasi karyawan baru
    -> dengan adanya satu acuan, karyawan baru bisa mengacu kepada Style Guide yang sudah dibuat oleh suatu tim.

    Komponen utama Style Guide
    1. Overview/Mission Statement
    -> menyatakan gambaran misi suatu brand agar memiliki suatu acuan yang sama
    2. Layout
    -> standardisasi dari semua halaman
    3. Typography
    -> stardardisasi font dari semua halaman (disarankan untuk memegang konsep simplicity/kesederhanaan)
    4. Color
    -> penentuan warna untuk fitur-fitur web
    5. Media Treatment
    -> bagaimana media-media yang sudah di-set digunakan
    6. Branding
    -> contoh : mengatur logo (memperhatikan larangan dalam pembuatan logo dari perusahaan)
    7. Navigation
    -> pengaturan navigasi
    8. Iconography
    -> pengaturan icon-icon yang sudah ditentukan dalam design tertentu
    9. Naming Convention & File Directories
    -> memperhatikan penamaan file dan directory dalam sebuah tim
    10. UI Patterns
    -> membuat standard dari fungsi-fungsi dalam web (contoh: pengaturan warna button)
    11. Writing Guidelines
    -> bukan cara penulisan code atau typography, malainkan cara berbahasa kepada target produk.
    12. Code Snippets
    -> potongan code yang bisa di re-use.

    Syarat-syarat Utama Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning, spacing
    8. Apa yang dapat dan tidak dapat dilakukan

  22. Nama : Santo Lamsar Harianja
    Nim : 11419027
    Kelas : 42 TRPL 1

    User interface Standards
    Style Guide atau Front End Style Guide adalah dokumen Komprehensif yang melacak semua elemen berulang seperti aturan branding, penggunaan icon hingga jumlah dan bentuk tombol.

    Alasan Mengapa harus menggunakan UI Standard:
    1.Konsistensi visual
    2.Konteks
    3.Kolaborasi
    4.Standardisasi Kode
    5.konsolidasi
    6.Orientasi karyawan baru

    Komponen Utama style guide ada 12 :
    1. overfiew/mision statement
    2.layout
    3.Typography
    4.Color
    5.Media Treatment
    6.Branding
    7.Navigation
    8.Iconography
    9.Naming convebtion & file directories
    10.UI patterns
    11.writing guidelines
    12. code snippets

    Semua komponen tersebut tidak harus diterapkan seluruhnya namun disesuaikan dengan kebutuhan tim dan developer.

  23. Nama : Riris Lasmarito Malau
    Nim : 11419022
    Kelas : 42 TRPL 1
    User interface standart adalah dokumen koprehensif yang melacak semua elemen berulang atau sebuah proyek mulai dari aturan branding, penggunaan icon dan bentuk-bentuk tombol.
    User interface standart sering mengacu pada aturan-aturan atau praktek-pratek yang boleh dan tidak boleh dilakukan pada sebuah desain.
    Disebut sebagai user interface standart karena sering mengacu pada aturan-aturan atau pratek-praktek yang boleh dan tidak boleh dilakukan pada sebuah desain.
    Mengapa menggunakan usr interface standart:
    1. Konsistensi visual : Misalnya warna, typography dan animasi
    2. Konteks : Mengapa desainer memilih desain tersebut
    3. Kolaborasi : Punya referensi, yang diacu bersama, dan akan mempunyai hasil bahasa yang sama
    4. Standarisasi : Potongan code yang umum yang bisa dicopy jika bekerja secara kolaborasi mengerjakan halaman-halam atau fitur-fitur yang berbeda tetapi desain nya sama.
    5. Konsolidasi : Punya satu referensi menjadi satu acuan dalam pembuatan desain
    6. Orientasi karyawan baru : Mempersingkat waktu mengacu kepada style guide yang kita buat.

  24. Nama : Gahasa Timothius B.P Purba
    NIM : 11419048
    Prodi : 42TRPL2

    User Interface Standard Sering juga disebut dengan User Interface Styleguide atau Front End Styleguide

    UI Styleguide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon, bentuk-bentuk tombol, aturan-aturan dalam proses pembangunan design, dll

    Mengapa Menggunakan UI Standards ?
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan Baru

    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  25. Nama : Tantri H.Silaen
    NIM : 11419059
    Kelas : 42 TRPL 2

    User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action.

    Alasan menggunakan UI Standards
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Berikut Komponen utama style guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  26. Nama : Naldo Tua Samosir
    NIM : 11419024
    Kelas : 42 TRPL 1

    UI Style Guide secara umum berisi kumpulan elemen” UI yang ditampilkan secara modular seperti potongan-potongan code yang bisa dicopy, sampai ke icon, warna, typography, navigasi, menu-menu, form input, dan lain lain. Disebut UI Standard karena memuat standard-standard yang harus diikuti oleh tim desain atau developer ketika mengembangkan interface atau aplikasi.
    Alasan menggunakan UI Standards
    1. Konsistensi visual
    Membuat panduan yang kohesif untuk mencerminkan Bahasa visual yang umum.
    2. Konteks
    Memberikan alasan kenapa desainer memilih desain tersebut.
    3. Kolaborasi
    Memiliki sebuah acuan atau referensi sehingga tidak terlalu banyak komunikasi dan agar bahasa yang digunakan sama.
    4. Standardisasi kode
    Ada potongan kode umum yang dapat dicopy, apabila bekerja secara kolaborasi, jadi walaupun mengerjakan halaman” yg berbeda namun desainnya tetap sama
    5. Konsolidasi
    Mempunyai referensi sebagai acuan untuk pembuatan desain
    6. Orientasi karyawan baru :
    Jika ada karyawan baru, maka dapat mengacu pada style guide yg telah dibuat, sehingga mempersingkat waktu

    Komponen utama style guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  27. Nama : Nazir Manahan Manurung
    NIM : 11419020
    Kelas : 42TRPL1

    User Interface Standard atau User Interface Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action dan mengacu pada aturan yag boleh atau tidak boleh kita lakukan dalam proses pembangunan desain yang dibangun.

    Alasan UI Standard digunakan, yakni:
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen utama dalam Style Guide ada 12 komponen diantaranya yakni:
    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  28. Oriza Sitanggang_11419018
    User Interface Style Guide atau sering juga disebut Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon hingga jumlah atau bentuk-bentuk tombol dalam proses pembangunan design, dan lain-lain.
    Alasan UI Standards digunakan, karena ada:
    – Konsistensi Visual
    – Konteks
    – Kolaborasi
    – Standardisasi Kode
    – Konsolidasi
    – Orientasi Karyawan Baru

    Syarat-syarat Utama Style Guide :
    1. Memiliki Daftar isi
    2. Layout yang Komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. Apa yang dapat dan tidak dapat dilakukan

  29. Nama : Kevin Johanes Pakpahan
    NIM : 11419042
    Kelas : 42 TRPL 2

    UI Style Guide / Front-End Style Guide
    adalah pelacak elemen berulang untuk sebuah proyek, mulai dari branding, icon, hingga jumlah maupun pengaruh bentuk-bentuk tombol. UI Style Guide berisi elemen-elemen interface yang ditampilkan secara modular.

    Alasan perlu menggunakan UI Standards
    1). Konsistensi Visual
    -membantu tim design untuk membuat sebuah panduan yang kohesif untuk mencerminkan bahsa visual yang umum
    2). Konteks
    – Alasan designer memilih suatu design tertentu
    3). Kolaborasi
    – Satu acuan dalam suatu tim untuk meminimalisir komunikasi
    4). Standardisasi kode
    – Potongan code untuk di-copy jika berkolaborasi dalam tim dalam mengerjakan halaman berbeda tapi design yang sama
    5). Konsolidasi
    – punya satu referensi untuk menjadi acuan dalam pembuatan design
    6). Orientasi karyawan baru
    – dengan adanya satu acuan, karyawan baru bisa mengacu kepada Style Guide yang sudah dibuat oleh suatu tim.

    Komponen utama Style Guide
    1). Overview/Mission Statement
    – menyatakan gambaran misi suatu brand agar memiliki suatu acuan yang sama
    2). Layout
    – standardisasi dari semua halaman
    3). Typography
    – stardardisasi font dari semua halaman (disarankan untuk memegang konsep simplicity/kesederhanaan)
    4). Color
    – penentuan warna untuk fitur-fitur web
    5). Media Treatment
    – bagaimana media-media yang sudah di-set digunakan
    6). Branding
    – contoh : mengatur logo (memperhatikan larangan dalam pembuatan logo dari perusahaan)
    7). Navigation
    – pengaturan navigasi
    8). Iconography
    – pengaturan icon-icon yang sudah ditentukan dalam design tertentu
    9). Naming Convention & File Directories
    – memperhatikan penamaan file dan directory dalam sebuah tim
    10). UI Patterns
    – membuat standard dari fungsi-fungsi dalam web (contoh: pengaturan warna button)
    11). Writing Guidelines
    – bukan cara penulisan code atau typography, malainkan cara berbahasa kepada target produk.
    12). Code Snippets
    – potongan code yang bisa di re-use.

    Syarat-syarat Utama Style Guide :
    1). Memiliki daftar isi
    2). Layout yang komprehensif
    3). Palet warna produk
    4). Style tipografi
    5). Deskripsi konteks penggunaan
    6). Code snippet
    7). Spesifikasi untuk implementasi termasuk positioning, spacing
    8). Apa yang dapat dan tidak dapat dilakukan

  30. Nama : Yonatan A.P.L Tobing
    NIM : 11419038
    Kelas : 42 TRPL-2

    User Interface Standard Sering atau yang disebut dengan User Interface Styleguide ialah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga unuk tombol call to action.

    Kita mengunakan Style Guide untuk beberapa alasan seperti
    1. Konsistensi visual
    2. Konteks
    3. Kolaborasi
    4. Standarisasi kode
    5. Konsoliidasi
    6. Orientasi karyawan baru

    Front-End Style Guide adalah kumpulan modular semua elemen pada UI produk, bersama code snippet untuk developer yang akan di-copy dan di-paste sesuai kebutuhan untuk mengimplementasikan elemen-elemen.

    Berikut Komponen utama UI Guide.
    1. verview/mission statement
    Beberapa topik yang mungkin dibahas pada bagian ini termasuk web/ aplikasi/ perusahaan:

    1) Misi menyeluruh
    2) Kepribadian
    3) Strategi konten
    4) Filosofi atau motto

    2. Layout (or grid) (layout atau grid)
    Bagian layout dan grid harus menunjukkan:

    – Nilai untuk border margin
    – Nilai untuk jarak ruang antar elemen yang berbeda (misalnya antara teks dan gambar, antara header dan top navigation bar, dll)
    – Penentuan posisi elemen global (logo, informasi copyright, dll)
    – Prosedur untuk kolom, jika berlaku (berapa banyak kolom, lebar kolom, spasi jarak antar kolom, dll).

    3. Typography (tipografi)
    Dua elemen dasar dari tipografi adalah size dan font.

    4. Color (warna)
    5. Media treatment (layanan media)
    6. Branding (branding)
    7. Navigation (navigasi)
    8. Iconography (ikonografi)
    9. Naming Convention and File Directories
    10. UI Pattern
    11. Writimg Guidelines
    12. Code Snippet

  31. Nama : Sarah Susanty Olyvia Tampubolon
    NIM : 11419007
    Kelas : 42TRPL1

    UI Style Guide atau Front-End Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon, hingga jumlah maupun bentuk-bentuk tombol.

    Alasan UI Standards digunakan :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide secara umum ada 12, yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Syarat-syarat Utama Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan

  32. Nama: Anjelina Sihombing
    NIM : 11419063
    Kelas: 42 TRPL 2
    Secara umum UI Standard ini berisi kumpulan elemen elemen user interface yang ditampilkan secara modular.
    Mengapa dokumen standard
    – Dokumen komphensif yang melacak semua elemen berulang untuk semua proyek
    – Merujuk pada aturan dan praktik yang disarankan.
    Komponen utama sebuah Style Guide adalah:

    Overview/ mission statement
    Layout (atau grid)
    Typography
    Color
    Media treatment
    Branding
    Navigation
    Iconography
    Naming convention & file directories
    UI patterns
    Writing guidelines
    Code snippets

  33. Nama : Febryanti Melati
    NIM : 11419061
    Kelas : 42TRPL2

    User Interface Style Guide atau Front-End Style Guide adalah sebuah dokumen yang berisi aturan aturan dalam mendesain suatu produk digital.
    Alasan UI Standards digunakan :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide :
    1. Overview/mission statement
    2. Layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code snippets

    Persyaratan Utama Style Guide
    – Memiliki daftar isi
    – Layout yang komprehensif
    – Palet warna produk
    – Style tipografi
    – Deskripsi konteks penggunaan
    – Code snippet
    – Spesifikasi untuk implementasi, termasuk positioning, spacing
    – Apa yang dapat dan tidak dapat dilakukan

  34. Nama : Berliana Laurenza Simamora
    NIM : 11419016

    User Interface Standards
    UI Style Guide/Front End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah atau bentuk-bentuk tombol.

    Alasan mengapa menggunakan style guide:
    • Konsistensi visual
    • Konteks
    • Kolaborasi
    • Standardisasi kode
    • Konsolidasi
    • Orientasi karyawan baru

    Komponen Utama Syle Guide
    1. Overview/mission statement
    2. Layout (grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

    Persyaratan Utama Style Guide
    1. Memiliki daftar isi yang membagi komponen ke dalam kategori yang mudah ditemukan.
    2. Layout yang yang responsif atau sistem grid untuk menempatkan elemen UI umum.
    3. Palet warna produk.
    4. Style tipografi.
    5. Deskripsi konteks penggunaan yang tepat.
    6. Code Snippet.
    7. Spesifikasi untuk implementasi, termasuk positioning, dan spacing.
    8. Apa yang dapat dan tidak dapat dilakukan untuk element tersebut.

  35. Nama : Hilman Sijabat
    NIM : 11419025
    Prodi : 42TRPL 1

    User Interface Standard Sering juga disebut dengan User Interface Styleguide atau Front End Styleguide
    UI Styleguide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon, bentuk-bentuk tombol, aturan-aturan dalam proses pembangunan design, dan lain-lain.

    Mengapa Menggunakan UI Standards ?
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan Baru

    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  36. Nama : Daniel A.C Simamora
    Nim : 11419001
    Kelas : 42 TRPL 1

    User interface standards(User Interface Style Guide atau Front-End Style Guide)
    => Dokumen komprehensif yang melacak semua elemen ber-ulang untuk sebuah proyek
    mulai dari aturan branding,penggunaan icon atau bentuk-bentuk tombol.

    Alasan kita menggunakan UI Standards :
    1. Konsistensi Visual
    =>User Interface Style Guide membuat sebuah panduan yang kohesif
    2. Konteks
    =>User Interface Style Guide tidak hanya memberikan gambaran secara visual dari halaman desain
    3. Kolaborasi
    =>Pada point ini menyatakan bahwa kita memiliki suatu manual yang diacu bersama oleh semua anggota tim
    4. Standardisasi kode
    =>Terdapat potongan-potongan code yang dapat di copy jika tiap anggota bekerja secara kolaborasi agar desain nya tetap sama
    5. Konsolidasi
    =>kita memiliki satu referensi dalam pembuatan desain
    6. Orientasi karyawan baru
    =>Contoh jika ada karyawan yang baru kita tidak perlu menggunakan waktu banyak dalam menjelaskan desain kita

    Terdapat 12 Komponen Utama dalam Style Guide yaitu:
    1. Overview/mission statement
    2. Layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code snippets

    Persyaratan Utama dalam Style Guide:
    1. Memiliki Daftar isi
    2. Layout yang Komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. deskripsi konteks penggunaan
    6. code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. apa yang dapat dan tidak dapat dilakukan

  37. Nama : Berliana Laurenza Simamora
    NIM : 11419016

    User Interface Standards
    UI Style Guide/Front End Style Guide adalah dokumen komprehensif yang melacak semua elemen
    berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah atau bentuk-bentuk tombol.
    Mengapa menggunakan style guide?
    • Konsistensi visual
    • Konteks
    • Kolaborasi
    • Standardisasi kode
    • Konsolidasi
    • Orientasi karyawan baru
    Komponen Utama Syle Guide
    1. Overview/mission statement
    2. Layout (grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets
    Persyaratan Utama Style Guide
    1. Memiliki daftar isi yang membagi komponen ke dalam kategori yang mudah ditemukan.
    2. Layout yang yang responsif atau sistem grid untuk menempatkan elemen UI umum.
    3. Palet warna produk.
    4. Style tipografi.
    5. Deskripsi konteks penggunaan yang tepat.
    6. Code Snippet.
    7. Spesifikasi untuk implementasi, termasuk positioning, dan spacing.
    8. Apa yang dapat dan tidak dapat dilakukan untuk element tersebut.

  38. Nama : Michael Binsar Tua Sinaga
    NIM : 11419012
    Kelas : 42 TRPL 1

    User Interface Style Guide adalah Dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunakan icon atau bentuk-bentuk tombol.

    Alasan Menggunakan UI Standarts :
    1. Konsistensi Visual
    -> Membuat panduan yang kohesif
    2. Konteks
    -> Memberikan alasan kenapa desainer memilih desain tersebut.
    3. Kolaborasi
    -> Memiliki sebuah acuan atau referensi sehingga tidak terlalu banyak komunikasi dan agar bahasa yang digunakan sama.
    4. Standardisasi kode
    -> Terdapat potongan kode umum yang dapat di copy, apabila bekerja secara kolaborasi, jadi walaupun mengerjakan halaman-halaman yang berbeda namun desainnya tetap sama.
    5. Konsolidasi
    -> Mempunyai referensi sebagai acuan dalam pembuatan desain.
    6. Orientasi Karyawan Baru
    ->Jika ada karyawan baru, maka dapat mengacu pada style guide yang telah dibuat, sehingga mempersingkat waktu.

    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  39. Nama: Denny Abraham Sinaga
    NIM : 11419036
    Kelas : 42TRPL2

    UI Style Guide adalah dokumen komprehensif yang melacak semua elemen proyek dan dapat diartikan sebagai panduan yang mengatur proses berjalannya desain yang ditampilkan secara modular.

    UI Standars digunakan dengan beberapa alasan, seperti:
    – Konsistensi visual, merepresentasikan visual yang umum.
    – Konteks, informasi tentang penggunaan desain dan alasan memilih.
    – Kolaborasi, adanya acuan mempercepat proses kolaborasi tim.
    – Standarisasi kode, penggunaan kode yang terdapat pada acuan.
    – Konsolidasi, sikap
    – Orientasi karyawan baru, representasi perusahaan dalam style guide yang dibuat.

    Komponen utama style guide :
    1. Overview,mission statement : deskripsi singkat yang mendeskripsikan tujuan dari sebuah organisasi.
    2. Layout : tata letak suatu elemen desain yang ditempatkan pada bidang desain.
    3. Typography : pedoman/aturan teks dalam proses desain.
    4. Color : pedoman/aturan warna dalam proses desain.
    5. Media treatment: pedoman/aturan sebuah gambar dalam proses desain.
    6. Branding : pedoman/aturan bagaimana branding diimplementasikan dalam proses desain.
    7. Navigation : pedoman/aturan sebuah navigasi dalam proses desain.
    8. Iconography : pedoman/aturan sebuah ikon dalam proses desain.
    9. Naming convention & file directories : pedoman/aturan penamaan sebuah file dengan cara yang bertujuan menjelaskan isi dan relasinya dengan file lain.
    10. UI patterns
    11. Writing guidelines : pedoman/aturan dalam melakukan komunikasi dalam praktik desain pada kata-kata.
    12. Code snippets: potongan-potongan kode siap pakai dan reusable

  40. Nama : Ivanowsky Fernandes Habeahan
    NIM : 11419030
    Kelas : 42 TRPL 1

    Kenapa disebut UI Standards karena pada inilah memuat standard-standard yang perlu diikuti bersama oleh tim design dan tim developer ketika mengembangkan sebuah interface dan aplikasi.

    Kenapa UI Standards itu penting
    – Dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek.
    – Merujuk pada aturan dan praktik yang disarankan.

    Komponen Utama Front-end Style Guide
    1. Overview/mission statement
    2. Layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code snippets

    Persyaratan Utama Style Guide
    1. Memiliki daftar isi.
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. Apa yang dapat dan tidak dapat dilakukan

  41. Nama : Jerikho Silaban
    NIM : 11419052
    Kelas : 42TRPL2

    UI Guideline adalah sebuah dokumen yang berisi aturan aturan dalam mendesain suatu produk digital.

    Alasan mengapa UI Standard digunakan, yakni:
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen-komponen utama dalam Style guide:
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  42. Nama : Maristella Sitanggang
    NIM : 11419064
    Kelas : 42TRPL 2

    Ui style guide atau disebut dengan front end style guide adalah dokumen komperhensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding penggunaan ikon hingga jumlah atau bentuk-bentuk tombol

    Mengapa disebut dengan UI Standart
    Karena di user interface target Inilah kita membuat standar-standar yang perlu diikuti bersama oleh tim desain tim developer ketika mengembangkan sebuah interface atau aplikasi

    Mengapa menggunakan UI Standards
    1. Konsistensi visual
    Style guide ini membantu tim desain untuk membuat sebuah panduan yang kohesif
    User interface style guide ini tidak hanya memberikan gambaran secara visual dari halaman-halaman desain tapi juga alasan mengapa desainer memilih desain tersebut
    3. Kolaborasi
    Menyatakan bahwa kita menjadi punya referensi yang diacu bersama oleh semua anggota tim, jadi kita bisa meminimalisir komunikasi
    4. Standardisasi kode
    Potongan-potongan code yang bisa di-copy
    5. Konsolidasi
    Kita punya referensi untuk menjadi acuan dalam pembuatan desain
    6. Orientasi karyawan baru
    Kita bisa mempersingkat waktu dan karyawan baru bisa mengacu pada style guide yang sudah kita buat

    Komponen utama style guide:
    1. Overview/mission statement
    2. Play out (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  43. Nama : Mario Wira Pratama Purba
    NIM : 114190520
    Kelas : 42TRPL2

    UI Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari branding, penggunaan icon, hingga jumlah maupun bentuk tombol.

    Alasan mengapa UI Standard dipakai, yaitu:
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen-komponen utama dalam Style guide, yaitu:
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  44. Nama : Nathan F L Tobing
    NIM : 11419003
    Kelas : 42 TRPL 1

    UI Style Guide adalah dokumen komprehensif yang melacak semua elemen

    berulang untuk sebuah proyek.

    Komponen utama Style Guide :
    1. overview / mission statement
    2. layout (grid)
    3. typography
    4. color
    5. media treatment
    6. branding
    7. navigation
    8. iconography
    9. naming convention & file directories
    10. ui patterns
    11. writing guidelines
    12. code snippets

    Alasan menggunakan UI standards :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

  45. Nama : Jovan Imanuel Sigalingging
    NIM : 11419021
    Kelas : 42TRPL1

    UI Style Guide (Front-End Style Guide)
    adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga untuk bentuk dan jenis tombol.

    Alasan mengapa kita perlu menggunakan UI Standards antara lain :
    1. Konsistensi Visual
    membantu desain kita agar kohesif
    2. Konteks
    menjelaskan mengapa kita memilih desain tersebut.
    3. Kolaborasi
    menyamakan presepsi antara anggota tim agar memiliki pola pengerjaan yang sama
    4. Standardisasi kode
    membantu desainer untuk menentukan standard code yang digunakan
    5. Konsolidasi
    desainer hanya perlu mencari satu acuan yaitu Style Guide menjadi kiblat perancangan
    6. Orientasi karyawan baru
    karyawan baru bisa mengacu kepada Style Guide yang sudah dibuat oleh suatu tim.

    Ada 12 komponen utama dalam Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Syarat-syarat Utama Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning, spacing
    8. Apa yang dapat dan tidak dapat dilakukan

  46. Nama : Samuel Halomoan Manalu
    NIM : 11419041

    User Interface Style Guide atau Front End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding, penggunaan icon, maupun bentuk-bentuk tombol.
    Alasan menggunakan UI Standards :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Ada 12 Komponen Utama Style Guide yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    12 komponen tersebut bisa disesuaikan oleh tim dan developer.

  47. Nama : Jerry Andrianto Pangaribuan
    NIM : 11419046
    Kelas : 42TRPL2

    User Interface Style Guide atau Front-End Style Guide yaitu dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon atau bentuk-bentuk tombol.

    Pada tingkat dasar, style guide ini membantu tim desain untuk membuat sebuah panduan yang kohesif.

    Ada beberapa alasan mengapa kita menggunakan UI Standards, antara lain:
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Berikut 12 Komponen Utama Style Guide
    1. Overview/mission statement
    2. Layout
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI Patterns
    11. Writing guidelines
    12. Code snippets

  48. Nama : Sarah O.Y Simorangkir
    NIM : 11419017
    Kelas: 42TRPL1

    User Interface Style Guide
    merupakan dokumen komprehensif(lengkap) yg melacak semua perulangan elemen yang terjadi pada sebuah proyek. seperti ikon, jenis atau bentuk-bentuk tombol, dan lainnya. atau dengan kata lain berisi kumpulan elemeuser interface yang ditampilkan secara modular/standard

    Alasan mengapa harus menggunakan UI Standard:
    -Konsistensi Visual
    -Konteks
    -Kolaborasi
    -Standardisasi Kode
    -Konsolidasi
    -Orientasi Karyawan Baru

    Komponen utama Style Guide:
    1.Overview/mission : berisikan gambaran tujuan produk sehingga tiap orang punya acuan yang sama
    2.Layout : membuat standard batas seperti margin dan penggunaan style, layout disusun dengan sistem grid
    3.Typography : membuat acuan/keseberagaman untuk penggunaan font yang sama di setiap halamannya.
    4.Color : penentuan/ penklasifikasian warna
    5.Media treatment : acuan penggunaan media misal jenis dan ukurannya
    6.Branding : pengaturan logo
    7.Navigation : acuan penyusunan navigasi misal search box, side bar,
    8.Iconography : acuan penggunaan icon yang seragam
    9.Naming convention & file directories : penyeragaman semua nama icon, file, directory, serta fungsi
    10.UI patterns : membuat standard acuan misal pengaturan button, pola penulisan UI dan penulisan codenya
    11.Writing guidelines : penggunaan bahasa dalam informasi website yang disesuaikan pada taget user
    12.Code snippets : potongan kode yang dapat dicopy paste untuk keseragaman setiap halaman.

  49. Nama : Evelin Sinurat
    NIM : 11419056
    Kelas : 42 TRPL 2

    User Interface Style Guide (Front-End Style Guide) adalah dokumen komprehensif untuk melacak semua elemen yang berulang sebuah proyek, seperti aturan branding, penggunaan icon, dan juga bentuk tombol.
    Dengan kata lain Style Guide juga merujuk pada aturan/praktek hal yang dapat dilakukan (tidak dapat dilakukan) dalam proses pembangunan desain.

    Komponen Utama Style Guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets
    Beberapa komponen tersebut seluruhnya tidak harus dibuat, dikarenakan harus menyesuaikan dengan kebutuhan tim desain dan tim developer yang terkait dengan pengembangan kebutuhan aplikasi tersebut, juga harus memuat informasi yang dibutuhkan oleh tim.

    Berikut beberapa persyaratan utama Style Guide:
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks pengguna
    6. Potongan code
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. Apa yang didapat dan tidak dapat dilakukan oleh elemen user interface

  50. Nama : Danuri Nainggolan
    NIM : 11419043
    Kelas : 42TRPL2

    User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action.

    Alasan menggunakan UI Standards
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Berikut Komponen utama style guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  51. Nama: Michael Situmorang
    NIM: 11419005
    Kelas: 42TRPL1

    UI Style Guide (Front-End Style Guide) merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek( dari aturan branding, penggunaan ikon, sampai jumlah maupun bentuk-bentuk tombol).

    Alasan UI Standards digunakan :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide secara umum ada 12, yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Ad 8 syarat utk membuat UI style Guide:
    -Daftar isi yang membagi komponen ke dalam kategori yang mudah ditemukan.

    -Menggunakan layout yang responsif/sistem grid untuk menempatkan elemen UI umum.

    -Color palette (dalam format yang sesuai, misalnya HEX untuk Web).

    -Style tipografi yang harus mencakup name, size, width, height dan konteks penggunaan yang sesuai untuk style tersebut.

    -Deskripsi konteks penggunaan yang tepat, seperti “Kapan menggunakan satu komponen tertentu?”

    -Code snippet.

    -Spesifikasi untuk implementasi, termasuk penentuan posisi dan jarak informasi.

    -Yang dilakukan dan yg tidak dilakukan oleh elemen tersebut

  52. Nama : Hotnida Siagian
    NIM : 11419023
    Kelas : 42TRPL1

    User Interface Standard atau User Interface Style Guide adalah dokumen komprehensif yang melacak adanya elemen berulang untuk sebuah proyek,
    dan merupakan kumpulan UI produk dengan code yang akan di-copy dan di-paste sesuai kebutuhan untuk implementasi elemen.

    UI standards digunakan karena :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru
    Komponen Utama Style Guide :
    1. Overview/mission statement : menyatakan gambaran misi/tujuan produk.
    2. Layout (or grid)
    3. Typography : setiap halaman memiliki standards yang sama.
    4. Color : penentuan warna untuk produk.
    5. Media treatment
    6. Branding : apa yang boleh dan dilarang dalam menggunakan logo.
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines : cara bertutur yang tepat terhadap customer.
    12. Code snippets : potongan code yang dapat di-reuse.

  53. Nama : Hepniwer Nur Aisah Purba
    NIM : 11419019
    Kelas : 42 TRPL 1

    User Interface Style Guide (Front-End Style Guide) adalah dokumen komprehensif untuk melacak semua elemen yang berulang sebuah proyek, seperti aturan branding, penggunaan icon, dan juga bentuk tombol.
    Dengan kata lain Style Guide juga merujuk pada aturan/praktek hal yang dapat dilakukan (tidak dapat dilakukan) dalam proses pembangunan desain.
    UI standards digunakan karena :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru
    Persyaratan dalam Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan oleh element-element yang ada di UI Style Guide.

  54. Nama : Geby W P Lumban Gaol
    NIM : 11419068
    Kelas : 42 TRPL 2

    Secara umum, UI Style Guide ini berisi kumpulan elemen-elemen user interface yang ditampilkan secara modular. Disebut UI Standards karena user interface style guide memuat standard standard yang perlu diikuti bersama oleh tim desain ketika mengembangkan sebuah interface dan aplikasi.
    Beberapa alasan mengapa harus menggunakan UI Standadrds :
    1. Konsistensi visual
    Pada tingkat dasar style guide membantu tim desain untuk membuat sebuah panduan yang kohesif (padu, kompak, bersatu) untuk mencerminkan bahasa visual yang umum.
    2. Konteks
    Tidak hanya memberikan gambaran secara visual dari halaman-halaman desain tetapi juga alasan mengapa desainer memilih desain tersebut.
    3. Kolaborasi
    Kita mempunyai referensi yang diacu bersama oleh semua anggota tim, jadi tidak terlalu banyak komunikasi karena sudah memiliki acuan yang sama.
    4. Standardisasi kode
    Potongan-potongan kode umum yang bisa dicopy jika bekerja dengan kolaborasi mengerjakan halaman-halaman atau fitur yang berbeda tetapi desain akan tetap sama.
    5. Konsolidasi
    Kita punya satu referensi untuk menjadi acuan dalam pembuatan desain.
    6. Orientasi karyawan baru
    Jika ada karyawan baru, tidak akan lagi menjelaskan konsep desain atau visi misi perusahaan.

    Komponen utama Style Guide:
    1. Overview / mission statement
    Menyatakan gambaran tujuan atau pernyataan misi produk yang dibuat.
    2. Layout (or grid)
    Memberikan gambaran layout dari interface yang akan dibangun.
    3. Typography
    Menentukan elemen-elemen terkait typogrphy yang akan digunakan.
    4. Color
    Penetuan warna.
    5. Media treatment
    Bagaimana media yang diset digunakan.
    6. Branding
    seperti mengatur logo.
    7. Navigation
    8. Iconography
    9. Naming convention & file direcotries
    10.UI patterns
    11.Writing guidelines
    12.Code sippets

    Beberapa hal yang perlu diperhatikan dalam pembuatan UI Style Guide :
    1. Membuat daftar isi, untuk memudahkan mencari informasi.
    2. Layout komprehensif, dapat dilihat secara keseluruhan dan mudah untuk melihat panduan yang dibuat.
    3. Palet warna produk
    4. Style typography
    5. Deskripsi konteks penggunaan, kapan suatu komponen bileh dan tidak boleh digunakan.
    6. Code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing.
    8. Apa yang dapat dan tidak dapat dilakukan.

  55. Nama : Kevin Yoyada Tambunan
    Nim : 11419033
    Kelas : 42 trpl 1

    User Interface Style Guide adalah dokumen komperhensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan branding penggunaan ikon hingga jumlah atau bentuk-bentuk tombol

    Alasan UI Standards digunakan :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide secara umum ada 12, yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  56. Nama : Martuani Sitohang
    NIM : 11419051
    Kelas : 42 TRPL 2

    User Interface Style Guide/Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding dan penggunaan icon atau bentuk-bentuk tombol.

    Alasan mengapa menggunakan UI Standards :

    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen Utama Style Guide, yaitu :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Syarat-syarat Utama Style Guide :
    a. Memiliki daftar isi
    b. Layout yang komprehensif
    c. Palet warna produk
    d. Style tipografi
    e. Deskripsi konteks penggunaan
    f. Code snippet
    g. Spesifikasi untuk implementasi termasuk positioning, spacing
    h. Apa yang dapat dan tidak dapat dilakukan

  57. Nama : Arijona Purba
    NIM : 11419034
    Kelas : 42TRPL1

    User Interface Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, bahkan sering mengacu pada aturan yang boleh dan tiadk boleh dilakukan dalam proses pembangunan design.

    Mengapa Menggunakan UI Standards ?
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan Baru

    Persyaratan dalam Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan oleh element-element yang ada di UI Style Guide

  58. Nama : Lilis Marito Pardosi
    Nim : 11419015
    Kelas : 42 TRPL 1

    UI Style Guide atau Front-End Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding, penggunaan icon, hingga jumlah maupun bentuk-bentuk tombol. Alasan menggunakan User Standards karena memiliki konsistensi visual, konteks,kolaborasi, standarisasi kode, konsolidasi, orientasi karyawan baru.
    Komponen Utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

    Syarat-syarat Utama Style Guide :
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi termasuk positioning dan spacing
    8. Apa yang dapat dan tidak dapat dilakukan oleh element-element yang ada di UI Style Guide

  59. Nama : Darwin Sibarani
    NIM : 11419029
    Prodi : 42TRPL 1

    User Interface Standard, sering disebut dengan User Interface Styleguide atau Front End Styleguide.
    UI Styleguide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek mulai dari aturan
    branding, penggunaan icon, bentuk-bentuk tombol, aturan-aturan dalam proses pembangunan design, dan lain-lain.

    Mengapa Menggunakan UI Standards, adalah dengan alasan berikut :
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi Kode
    5. Konsolidasi
    6. Orientasi Karyawan Baru

    Komponen utama Style Guide :
    1. Overview/Mission Statement
    2. Layout
    3. Typography
    4. Color
    5. Media Treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming Convention & File Directories
    10. UI Patterns
    11. Writing Guidelines
    12. Code Snippets

  60. Nama : Dwiky F. N. Sitorus
    NIM : 11419004
    Kelas : 42 TRPL 1

    User Interface Standard/ Front-End Style Guide merupakan dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari branding, penggunaan icon, hingga jumlah maupun bentuk tombol
    Alasan menggunakan UI Standards
    :
    1. Konsistensi visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Komponen utama style guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  61. Nama : Yohana Sihombing
    NIM :11419055
    Kelas : 42 TRPL-2

    Pentingnya UI Standards
    Dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding,penggunaan icon hingga jumlah untuk tombol call to action.Bisa memuat motif atau misi suatu & merujuk pada aturan dan praktik yang disarankan
    Alasan mengapa menngunakan UI standards -konsistensi visual (padu,kompak,bersatu)
    -konteks(alasaan mengapa memilih desain tersebut)
    -kolaborasi(bahasa 1 yang sama)
    -standardisasi kode
    -konsolidasi(punya 1 referensi menjadi acuan desain)
    -orentiasi karyawan baru
    Komponen Utama Front_end Style Guide
    Secara umum ada 12
    *1 Overview/mission statement
    *2 Layout(or grid)
    *3 Typography
    *4 Color
    *5 Media Treatment
    *6 Branding
    *7 Navigation
    *8 Iconography
    *9 Naming convention & file directories
    *10 UI patterns
    *11 Writing guidelines
    *12 Code snippets

  62. Nama : Andree Panjaitan
    NIM : 11419014
    Kelas : 42 TRPL 1

    Mengapa menggunakan UI standards
    1. Konsistensi Visual
    – Sebuah panduan yang kohesif
    2. Konteks
    – Tidak hanya visual saja akan tetapi alasan alasan
    3. Kolaborasi
    – Supaya memiliki satu bahasa yang sama.
    4. Standardisasi
    – Ada sebuah potongan kode yang dapat digunakan berulang
    5. Konsolidasi
    – Punya satu referensi menjadi acuan pembuatan desain
    6. Orientasi karyawan bar
    – Mempersingkat waktu untuk karyawan baru untuk mengacu kepada style guide yang dibuat

    Komponen utama Style Guide
    1. Overview/ mission Statement
    – Menyatakan gambaran atau tujuan misi produk/brand. Isi biasanya misi secara keseluruhan.
    2. Loyout (or grid)
    – Kita perlu memberikan gambaran layout agar semua orang memiliki konsep yang sama.
    3. Typography
    – Kita perlu memetakan element-element agar semuanya seragam pada setiap halaman.
    4. Color
    – Semua warna perlu diatur, atau sebaiknya semua diset kode warnanya.
    5. Media treatment
    – Bagaimana media-media yang kita set digunakan.
    6. Branding
    – Kita perlu untuk mengatur logo.
    7. Navigation
    – kita perlu mengatur navigasi sesuai aturan.
    8. Iconography
    – Kita sudah menset icon-icon yang akan kita gunakan.
    9. Naming convention & file directions
    – Kita juga perlu mengatur penamaan fungsi, penamaan file, penamaan item.
    10. UI patterns
    – Kita harus membuat standard untuk UI kita agar lebih seragam.
    11. Writing gudelines
    – Ini mengacu pada cara berbahasa dari sebuah perusahaan.
    12. Code Snippets
    – Potongan potongan code yang dapat direuse.

    Persyaratan Utama Style Guide
    1. Memiliki daftar isi
    2. Layout yang komprehensif
    3. Palet warna produk
    4. Style tipografi
    5. Deskripsi konteks penggunaan
    6. Code snippet
    7. Spesifikasi untuk implementasi, termasuk positioning, spacing
    8. Apa yang dapat dan tidak dapat dilakukan.

  63. Timothy Henan
    2 hari lalu
    Nama : Timothy J F Henan
    NIM : 11419028
    Kelas : 42 TRPL 1

    User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action.

    Alasan menggunakan UI Standards
    1. Konsistensi Visual
    2. Konteks
    3. Kolaborasi
    4. Standardisasi kode
    5. Konsolidasi
    6. Orientasi karyawan baru

    Berikut Komponen utama style guide:
    1. Overview/mission statement
    2. Layout (or grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

  64. User Interface Style Guide atau Front-End Style Guide adalah dokumen komprehensif yang melacak semua elemen berulang untuk sebuah proyek, mulai dari aturan branding hingga jumlah untuk tombol call to action.

    alasan menggunakan style guide :
    1.Konsistensi visual
    2.Konteks
    3.Kolaborasi
    4.Standardisasi kode
    5.Konsolidasi
    6.Orientasi karyawan baru

    Komponen utama sebuah Style Guide adalah:

    1.Overview/ mission statement
    2. Layout (atau grid)
    3. Typography
    4. Color
    5. Media treatment
    6. Branding
    7. Navigation
    8. Iconography
    9. Naming convention & file directories
    10. UI patterns
    11. Writing guidelines
    12. Code snippets

Comments are closed.