Poin Penting
1. Mulailah dengan fitur, bukan tata letak
Cara termudah untuk merasa frustrasi dan terjebak saat bekerja pada desain baru adalah dengan mencoba "mendesain aplikasi."
Fokus pada fungsionalitas terlebih dahulu. Mulailah dengan merancang fitur atau bagian fungsionalitas tertentu daripada keseluruhan tata letak atau "cangkang" aplikasi. Pendekatan ini memungkinkan Anda membuat keputusan yang tepat tentang navigasi dan struktur berdasarkan konten nyata dan kebutuhan pengguna. Misalnya, saat merancang layanan pemesanan penerbangan, mulailah dengan elemen penting seperti kolom keberangkatan dan tujuan, pemilih tanggal, dan tombol pencarian.
Hindari keputusan prematur. Dengan fokus pada fitur terlebih dahulu, Anda mencegah diri dari membuat pilihan yang tidak terinformasi tentang navigasi, tata letak, dan elemen struktural lainnya. Metode ini membantu Anda membangun desain yang lebih berpusat pada pengguna yang berkembang secara alami dari fungsionalitas inti aplikasi Anda.
2. Rancang dalam skala abu-abu sebelum menambahkan warna
Dengan merancang dalam skala abu-abu, Anda dipaksa untuk menggunakan jarak, kontras, dan ukuran untuk melakukan semua pekerjaan berat.
Tekankan struktur dan hierarki. Merancang dalam skala abu-abu pada awalnya memaksa Anda untuk fokus pada aspek fundamental desain Anda: tata letak, jarak, dan kontras. Pendekatan ini memastikan bahwa struktur inti desain Anda solid sebelum memperkenalkan kompleksitas warna.
Perbaiki tanpa gangguan. Bekerja dalam skala abu-abu memungkinkan Anda membuat keputusan penting tentang hierarki dan penekanan tanpa potensi gangguan dari warna. Setelah Anda menetapkan fondasi yang kuat, Anda dapat memperkenalkan warna secara strategis untuk meningkatkan desain daripada mengandalkannya untuk menciptakan struktur atau makna.
- Mulailah dengan wireframe atau sketsa dasar
- Perbaiki tata letak dan jarak dalam skala abu-abu
- Tetapkan hierarki visual yang jelas menggunakan kontras dan ukuran
- Perkenalkan warna hanya setelah desain inti solid
3. Tetapkan hierarki visual melalui ukuran, berat, dan kontras
Hierarki visual mengacu pada seberapa penting elemen dalam antarmuka muncul satu sama lain, dan ini adalah alat paling efektif yang Anda miliki untuk membuat sesuatu terasa "dirancang".
Gunakan berbagai teknik. Ciptakan hierarki dengan memvariasikan ukuran font, berat, dan warna. Jangan hanya mengandalkan ukuran font; menggabungkan berbagai teknik sering kali menghasilkan hasil yang lebih baik. Misalnya, gunakan berat font yang lebih tebal atau warna yang lebih gelap untuk menekankan elemen penting sambil menjaga ukuran font tetap wajar.
Pertimbangkan konteks. Sesuaikan hierarki Anda berdasarkan kebutuhan spesifik dari setiap elemen antarmuka. Misalnya:
- Judul: Ukuran lebih besar, berat lebih tebal
- Teks tubuh: Ukuran sedang, berat biasa
- Teks pendukung: Ukuran lebih kecil, warna lebih terang
- Tombol ajakan bertindak: Warna kontras, teks tebal
Ingatlah bahwa hierarki bukan hanya tentang membuat sesuatu menonjol—ini juga tentang mengurangi penekanan pada elemen yang kurang penting untuk menciptakan jalur visual yang jelas bagi pengguna.
4. Ciptakan kedalaman dengan bayangan dan lapisan
Bayangan bisa lebih dari sekadar efek mencolok — jika digunakan dengan bijak, mereka memungkinkan Anda menempatkan elemen pada sumbu z virtual untuk menciptakan rasa kedalaman yang berarti.
Gunakan bayangan dengan tujuan. Bayangan dapat menyampaikan elevasi dan pentingnya dalam antarmuka Anda. Tetapkan sistem ukuran dan intensitas bayangan untuk mewakili berbagai tingkat elevasi secara konsisten di seluruh desain Anda.
- Bayangan kecil: Elemen yang sedikit terangkat (misalnya, tombol)
- Bayangan sedang: Elemen yang melayang (misalnya, menu dropdown)
- Bayangan besar: Dialog modal atau elemen yang menonjol
Lapisi elemen untuk kedalaman. Tumpang tindih berbagai komponen untuk menciptakan rasa lapisan dalam desain Anda. Teknik ini dapat menambah minat visual dan membantu mengorganisir informasi secara hierarkis. Misalnya:
- Offset kartu untuk tumpang tindih latar belakang
- Biarkan elemen meluas di luar wadahnya
- Gunakan "batas tak terlihat" untuk memisahkan gambar yang tumpang tindih
5. Gunakan sistem jarak dan ukuran yang konsisten
Pendekatan sederhana adalah memulai dengan nilai dasar yang masuk akal, lalu membangun skala menggunakan faktor dan kelipatan dari nilai tersebut.
Tetapkan skala. Buat sistem jarak dan ukuran berdasarkan skala yang konsisten. Pendekatan ini memastikan harmoni visual dan mempercepat proses desain dengan membatasi pilihan. Mulailah dengan nilai dasar (misalnya, 16px) dan buat skala menggunakan kelipatan atau faktor dari nilai tersebut.
Terapkan secara konsisten. Gunakan skala yang telah Anda tetapkan untuk berbagai aspek desain Anda:
- Margin dan padding
- Ukuran elemen (tombol, kolom input, dll.)
- Jarak grid
- Tipografi (tinggi baris, jarak paragraf)
Dengan mematuhi sistem yang konsisten, Anda menciptakan desain yang lebih kohesif dan mengurangi kelelahan keputusan selama proses desain. Ingatlah bahwa skala Anda harus memberikan cukup opsi untuk fleksibilitas tetapi tidak terlalu banyak sehingga menjadi membingungkan.
6. Pilih jenis huruf dengan bijak dan tetapkan skala jenis huruf
Untuk desain UI, pilihan teraman Anda adalah sans-serif yang cukup netral — pikirkan sesuatu seperti Helvetica.
Pilih jenis huruf yang sesuai. Pilih jenis huruf yang dapat dibaca pada berbagai ukuran dan sesuai untuk tujuan desain Anda. Untuk antarmuka pengguna, font sans-serif netral sering kali menjadi pilihan terbaik. Pertimbangkan faktor-faktor seperti:
- Keterbacaan pada ukuran kecil
- Berat dan gaya yang tersedia
- Kelengkapan set karakter
- Lisensi dan hak penggunaan
Buat skala jenis huruf. Tetapkan serangkaian ukuran font yang konsisten untuk digunakan di seluruh desain Anda. Ini membantu menjaga harmoni visual dan mempercepat proses desain.
- Mulailah dengan ukuran dasar (misalnya, 16px untuk teks tubuh)
- Buat skala 5-8 ukuran untuk berbagai tujuan (judul, keterangan, dll.)
- Gunakan skala non-linear untuk lebih banyak fleksibilitas (misalnya, 12, 14, 16, 20, 24, 32, 48px)
7. Kembangkan palet warna yang komprehensif
Anda dapat membagi palet warna yang baik menjadi tiga kategori.
Bangun palet yang serbaguna. Ciptakan sistem warna yang komprehensif yang mencakup:
- Abu-abu: 8-10 nuansa untuk teks, latar belakang, dan elemen UI
- Warna utama: 5-10 nuansa masing-masing untuk warna merek utama dan tindakan
- Warna aksen: Warna tambahan untuk sorotan, peringatan, dan visualisasi data
Pertimbangkan psikologi warna. Pilih warna yang selaras dengan kepribadian merek Anda dan membangkitkan emosi yang tepat. Misalnya:
- Biru: Kepercayaan, profesionalisme
- Hijau: Pertumbuhan, positif
- Merah: Urgensi, pentingnya
Ingatlah untuk menguji palet Anda untuk aksesibilitas dan memastikan kontras yang cukup antara teks dan warna latar belakang.
8. Optimalkan gambar untuk keterbacaan dan dampak
Untuk menyelesaikan masalah ini, Anda perlu mengurangi dinamika dalam gambar untuk membuat kontras antara teks dan latar belakang lebih konsisten.
Tingkatkan kontras gambar-teks. Saat menempatkan teks di atas gambar, pastikan keterbacaan dengan menyesuaikan gambar atau menambahkan overlay:
- Kurangi kontras gambar
- Tambahkan overlay semi-transparan
- Gunakan filter warna untuk menyatukan gambar dengan desain Anda
- Terapkan bayangan atau cahaya teks yang halus
Kontrol konten yang dihasilkan pengguna. Saat menangani gambar yang diunggah pengguna:
- Terapkan rasio dan ukuran aspek yang konsisten
- Gunakan batas atau bayangan halus untuk memisahkan gambar dari latar belakang
- Terapkan gaya cadangan untuk gambar yang hilang atau bermasalah
Teknik-teknik ini membantu menjaga integritas desain sambil mengakomodasi konten yang bervariasi.
9. Perhatikan detail kecil untuk tampilan yang halus
Anda tidak selalu harus menambahkan elemen baru ke desain untuk menambah daya tarik — ada banyak cara untuk menghidupkan halaman dengan "meningkatkan" apa yang sudah ada.
Tingkatkan elemen standar. Tingkatkan komponen UI umum untuk menambah minat visual:
- Ganti peluru default dengan ikon kustom
- Gaya tanda kutip dalam testimoni
- Buat gaya kotak centang dan tombol radio kustom
- Tambahkan batas aksen pada kartu atau bagian
Gunakan dekorasi latar belakang yang halus. Pecahkan kebosanan dalam desain Anda dengan:
- Menerapkan gradasi atau pola halus pada latar belakang
- Menggunakan warna latar belakang yang berbeda untuk membedakan bagian
- Menambahkan tekstur ringan atau ilustrasi halus
Sentuhan kecil ini dapat secara signifikan meningkatkan kilau dan profesionalisme keseluruhan desain Anda tanpa memerlukan perubahan tata letak yang besar.
Terakhir diperbarui:
FAQ
What's "Refactoring UI" about?
- Design principles for developers: "Refactoring UI" by Adam Wathan provides practical design advice specifically tailored for developers who may not have formal design training.
- Focus on UI improvement: The book emphasizes improving user interfaces by focusing on hierarchy, layout, color, and typography.
- Actionable tips and techniques: It offers actionable tips and techniques to make interfaces more visually appealing and user-friendly.
- Systematic approach: The book encourages a systematic approach to design, helping readers create consistent and efficient UI designs.
Why should I read "Refactoring UI"?
- Enhance design skills: If you're a developer looking to improve your design skills, this book provides clear, practical guidance.
- Bridge the gap: It helps bridge the gap between development and design, making it easier to create aesthetically pleasing and functional interfaces.
- Time-saving techniques: The book offers time-saving techniques and systems that streamline the design process.
- Real-world examples: It includes real-world examples and case studies that illustrate the application of design principles.
What are the key takeaways of "Refactoring UI"?
- Start with features: Begin designing with a focus on features rather than the overall layout to avoid frustration and inefficiency.
- Hierarchy is crucial: Establish a clear visual hierarchy to make interfaces more intuitive and user-friendly.
- Limit choices: Define systems for colors, fonts, and spacing to reduce decision fatigue and maintain consistency.
- Emphasize simplicity: Avoid over-designing and focus on creating the simplest useful version of a feature.
How does "Refactoring UI" suggest starting a design?
- Feature-first approach: Start with a specific feature rather than the entire layout to gather necessary information for design decisions.
- Example of flight booking: For a flight booking service, begin with the search functionality, including fields for departure and destination cities.
- Avoid shell design: Avoid starting with the app's shell, such as navigation bars, until features are defined.
- Iterative process: Use an iterative process to refine features and layout as more information becomes available.
What does "Refactoring UI" say about visual hierarchy?
- Not all elements are equal: Recognize that not all elements in an interface hold the same importance and should be styled accordingly.
- Use size wisely: Avoid relying solely on size to establish hierarchy; use font weight and color to emphasize important elements.
- De-emphasize to emphasize: Sometimes, de-emphasizing less important elements can make the main elements stand out more.
- Separate visual and document hierarchy: Ensure that visual hierarchy is distinct from document hierarchy to maintain clarity.
How does "Refactoring UI" recommend using color?
- Ditch hex for HSL: Use HSL color values for more intuitive adjustments based on hue, saturation, and lightness.
- More colors than expected: Prepare a comprehensive palette with multiple shades for greys, primary, and accent colors.
- Define shades upfront: Establish a fixed set of shades to avoid inconsistencies and maintain a cohesive color scheme.
- Accessible design: Ensure color choices meet accessibility standards without compromising aesthetics.
What does "Refactoring UI" suggest about layout and spacing?
- Start with too much space: Begin with excessive white space and reduce it to achieve a clean and balanced design.
- Establish a spacing system: Use a non-linear scale for spacing and sizing to simplify decisions and maintain consistency.
- Don't fill the screen: Avoid using the entire screen width unnecessarily; give elements the space they need.
- Grids are overrated: Use fixed widths for elements when appropriate, rather than relying solely on fluid grid systems.
How does "Refactoring UI" address typography?
- Establish a type scale: Define a type scale with a range of font sizes to ensure consistency and speed up decision-making.
- Avoid em units: Use px or rem units for font sizes to maintain consistency across different contexts.
- Good font selection: Choose fonts with multiple weights and optimize for legibility, especially for UI text.
- Line length and alignment: Keep line lengths between 45-75 characters and align text for readability.
What are some design systems recommended in "Refactoring UI"?
- Color systems: Define a comprehensive color palette with multiple shades for each color to maintain consistency.
- Typography systems: Establish a type scale with specific font sizes and weights to streamline text styling.
- Spacing systems: Use a non-linear scale for spacing and sizing to simplify layout decisions.
- Shadow systems: Define a set of shadows to convey elevation and depth consistently across the UI.
How does "Refactoring UI" suggest creating depth in design?
- Emulate a light source: Use light and shadow to create the illusion of depth, making elements appear raised or inset.
- Shadows for elevation: Use shadows to position elements on a virtual z-axis, enhancing the sense of depth.
- Flat design depth: Even in flat designs, use color and solid shadows to convey depth without relying on gradients or textures.
- Overlap elements: Create layers by overlapping elements, adding a sense of depth and complexity to the design.
What does "Refactoring UI" say about working with images?
- Use high-quality photos: Choose professional or high-quality stock photos to enhance the design.
- Consistent text contrast: Ensure text on images maintains consistent contrast for readability.
- Intended size for images: Use images at their intended size to avoid quality loss and maintain clarity.
- User-uploaded content: Control the shape and size of user-uploaded images to maintain layout integrity.
What are the best quotes from "Refactoring UI" and what do they mean?
- "Start with a feature, not a layout": Focus on designing specific features first to gather necessary information for layout decisions.
- "Hierarchy is everything": Establishing a clear visual hierarchy is crucial for making interfaces intuitive and user-friendly.
- "Limit your choices": Define systems for design elements to reduce decision fatigue and maintain consistency.
- "Accessible doesn’t have to mean ugly": Ensure designs meet accessibility standards without compromising aesthetics.
Ulasan
Refactoring UI mendapatkan ulasan yang sangat positif, dengan pembaca memuji pendekatannya yang praktis dan ringkas dalam desain antarmuka pengguna. Banyak yang menganggapnya sangat berharga bagi para pengembang yang ingin meningkatkan keterampilan desain mereka. Buku ini dipuji karena contoh-contoh yang jelas, tips yang berguna, dan kemampuannya untuk menjelaskan konsep-konsep kompleks dengan cara yang sederhana. Pembaca menghargai fokusnya pada penciptaan desain yang konsisten dan fungsional serta pembangunan sistem desain yang efektif. Meskipun beberapa desainer berpengalaman menganggapnya dasar, sebagian besar menganggapnya sebagai sumber daya yang penting bagi siapa saja yang terlibat dalam pengembangan web atau aplikasi, terlepas dari latar belakang desain mereka.
Similar Books
