Membangun Web Site“Cantik”

Presentasi berjudul: "Membangun Web Site“Cantik”"— Transcript presentasi:

1 Membangun Web Site“Cantik”
Teguh Sutanto, S.Kom., M.Kom. Mail : | Mobile:

2 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

3 “Beauty in the eye of user”

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

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

6 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

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

8 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?

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

10 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?

11 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?

12 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?

13 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

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

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

16 Hierarchical Web Site Structure

17 Webbed Web Site Structure

18 Broad Web Site

19 Deep Web Site

20 Struktur Layout Halaman Web

21 Visual Structure dengan Grid

22 Grid

23 Contoh Penggunaan Grid

24 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

25

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

27 Contoh White Space : www.sidigital.com

28 Terima kasih