Membangun Web Site“Cantik” Teguh Sutanto, S.Kom., M.Kom. Mail : teguh.Sutanto@gmail.com | teguh@stikom.edu Mobile: +62 856307 6813 12-04-2016

Web Site? A Web Site is a related collection of web pages that is created and maintained by individual, company, education institution, or other organization

“Beauty in the eye of user”

Beauty Web Purpose Communication Typefaces Colours Images Navigation Layout F-Pattern Design Load Time Mobile Friendly Beauty Web

“Web Design is All About Communication, and Your Users”

User-Centered Design Ketika kita membangun sebuah website, kita sedang membangun untuk user kita bukan untuk kita sendiri Kita merancang website untuk kekurangan dan kelebihan user Kita perlu menerapkan berbagai teknik yang dapat membawa user mengunjungi website anda, membantu mereka melakukan pencarian, memastikan mereka memiliki sebuah pengalaman, dan menjaga mereka untuk kembali mengunjungi website anda

Siklus Hidup Pengembangan Web Site Planning Analysis Design and development Pre-production Navigation Layout Writing Testing implementation and maintenance

Planning What is the purpose of the Web site? Who will use this Web site? What are their computing environment? Who owns and authors the information on the Web site? Who decided if/where the information goes on the Web site?

Analysis What tasks do the users need performs? What information is useful to the user? What process considerations must be made?

Design and Development How many web pages will be included in the Web site? How will the Web pages be organizes? What type of Web site structure is appropriate for the content? How can I best present the content for ease of use? What type of Web site layout is appropriate? What forms of multimedia is helpful to the user? Will there be an international audience?

Testing Do the Web pages pass the World Wide Web Consortium (W3C) validation process as HTML 5 compliant? Is the Web site content correct? Does the Website functions correctly? Are users able to find the information they need to complete desired tasks? Is the navigation clear and easy to use?

Implementation and Maintenance How is the Web site published? How is the Web site updated? Who is responsible for content updates? Will the Web site be monitored?

Panduan Umum Pengembangan Web Site Buat perencanaan halaman Web yang detail dan matang Analisa kebutuhan untuk halaman web Pilih konten web Tentukan konvensi penamaan file Tentukan lokasi penyimpanan Tentukan struktur direktori tempat penyimpanan halaman web Identifikasi bagaimana memformat berbagai variasi halaman web Cari gambar/image, icon yang pas Uji web site

Struktur Web Site Linear Hierarchical Webbed Broad Web Site Deep Web Site

Linear Web Site Structure Linear Web Site Structure with Links to Home Page

Hierarchical Web Site Structure

Webbed Web Site Structure

Broad Web Site

Deep Web Site

Struktur Layout Halaman Web

Visual Structure dengan Grid

Grid

Contoh Penggunaan Grid

White Space White space or “negative space”, referring to the empty space between and around elements of a design or page layout Element White Space Space around graphics and images Margins, paddings and gutters Line-spacing and letter-spacing within text content Space between columns

Contoh White Space : http://madebysofa.com/

Contoh White Space : www.sidigital.com

Terima kasih