Download Bagaimana membangun website yang cantik

Survey
yes no Was this document useful for you?
   Thank you for your participation!

* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project

Document related concepts

URL redirection wikipedia , lookup

Transcript
Membangun
Web Site“Cantik”
Teguh Sutanto, S.Kom., M.Kom.
Mail : [email protected] | [email protected]
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”
Communication
Typefaces
Colours
Images
Navigation
Layout
F-Pattern Design
Load Time
Mobile Friendly
Beauty Web
Purpose
“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