Desain Web dengan Framework

Presentasi berjudul: "Desain Web dengan Framework"— Transcript presentasi:

1 Desain Web dengan Framework
MATA KULIAH :DESAIN WEB Oleh : Denny Sagita R, S.Kom., M.Kom TAHUN AJARAN 2013/2014 SEMESTER GANJIL

2 Learning Outcomes Setelah mengikuti bab ini diharapkan mahasiswa dapat memahami tahapan dalam pengembangan proyek web Mahasiswa memahami proses perencanaan dalam membagun website Mahasiswa dapat memahami konsep Grid dalam pembuatan desain web

3 Different Phases of a Web Project
1. Planning phase: Mendefinisikan tujuan dan maksud dari sebuah website, mendefinisikan konten apa yang perlu ditanamkan pada website, menganalisa kebutuhan website yang dinamis 2. Contract phase: Membuat suatu draft proposal dan menyerahkan ke client terkait dengan lingkup project/outline untuk penentuan kesepakan 3. Design phase: Membuatu suatu keputusan tentang layout, warna, organisasi, dan konten. Kemudian Mock-up desain kepada client untuk meminta

4 Different Phases of a Web Project
4. Building phase: Convert mock-up ke HTML, CSS, dan JavaScript 5. Testing phase: Menguji desain di dalam server pengujian menggunakan beberapa browser yang populer di beberapa platform PC 6. Site launch: Memberikan keamanan pada domain dan hosting serta mengunggah file ke host server dan menguji kembali website hingga siap di publikasikan dan di lakukan perawatan

5 Start With a Plan Determining the site’s purpose Building a site image
Mengumpulkan berbagai informasi yang diperlukan Building a site image Mendefinisikan dan membuat image yang digunakan dalam proyek web mewakili tujuan konsumen Determining site content Home page, contact information, product, credits, code compliance, RSS feeds, help, sitemap Diagnosing the site’s dynamic requirements Articles, paper, event calendar, news, blog post Defining ways to attract visitors Newsletter, freebies, downloads, blogging, tools

6 Defining Audience Performing market research
Pengumpulan informasi yang bersifat umum Melihat Saingan Gathering information on the target audience’s computer use Menggunakan data statistik Assessing a site’s competition Determining benefits to site visitors Memberikan pengalaman pengguna, kualitas produk Memberikan keuntungan yaitu bermanfaat, berguna, menguntungkan, menyenangkan bagi pengunjung

7 Gathering Content Determining a site’s content needs
Music, illustrations, videos, documents Building wireframe Navigasi dan Komponen Interaktif Konten apa yang perlu ditampilkan dalam suatu halaman Gathering other content Photo, stock images, royalti, copyrights Page title, meta-tag data, search-engine friendly Organizing site content Mengorganisir halaman yang perlu ditampilkan Creating a visual site map

8

9 Choosing The Right Tools
Using a Web editor (HTML versus WYSIWYG) Dreamweaver, BBEdit, Notepad++ Choosing the right graphics software Vector/raster image processor Understanding HTML basics and code structure Using color effectively on the Web Choose web-safe color

10 Web Safe Color #RGB 216 Web-safe Color

11 Good Design & Bad Design
Sangat mudah untuk mengajari seseorang bagaimana membuat halaman web, namun sangat sulit mengajari seseorang merangcang/desain web Orang biasa sering melakukan kesalahan yang sama khususnya dalam menggunakan suatu antarmuka aplikasi Tugas sebagai desainer web adalah mencegah seminimal mungkin terjadi kesalahan-kesalahan umum yang sering dilakukan dalam menggunakan suatu web

12 Bad Design Example http://www.astrology-online.com/frames.htm

13

14 Top No-Nos in The Web Using Frames Gratuitous Use of Technology
Under Construction Signs Misusing Graphics Ransom Notes Fonts - and Comic Sans Complex Backgrounds Scrolling Text, Marquees, and Constantly Running Animations Complex URLs Menggunakan teknologi tanpa alasan atau sebab

15

16

17

18

19

20 Top No-Nos in The Web (2) Orphan Pages Doorway Pages
Halaman terlalu panjang Kekurangan dukungan navigasi TIdak ada konten yang menarik Informasi kadaluarsa Masalah link Terlalu lama dalam proses download untuk memperoleh informasi

21 Ten Good Deeds in Web Design
Name and logo Search Headlines and page titles Facilitate scanning Hypertext to structure the content space (don’t cram all related into one page) Product photos (but don’t clutter) Link titles – with meaning! Accessible for users with disabilities, Do the same as everybody else

22 Layout, and Composition
Layout/ tata letak merupakan suatu bentuk organisasi visualisasi dalam bentuk halaman cetak atau digital , dan biasa disebut dengan penataan ruang Composition/komposisi merupakan bentuk, seluruh properti ruang dan struktur yang dihasilkan dari bentuk visualisasi yang disengaja dan penataaan jenis elemen grafis dalam hubungan satu sama lain membentuk format yang dimaksudkan untuk berkomunikasi secara visual, menjadi lebih menarik, dan ekspresif

23 Grid A grid is a guide—a modular, compositional structure made up of verticals and horizontals that divide a format into columns and margins. Grids organize type and visuals. Defining boundaries starts with margins—the blank space on the left, right, top, or bottom edge of any printed or digital page. Margins function as frames around visual and typographic content, concurrently defining active or live areas of the page as well as its boundaries.

24

25

26

27

28 Grid System for Web Design
Why Grid System? Save time, save money, & reduce frustation Solid visual and structural balance in website Offer more flexibility of User Experience Easy to follow for user Consistent Easy to follow, easy to update Elements Column, Margin, Gutter Example 960 Grid System –

29 Grid Example

30

31 Jika tidak pertanyaan, saya akhiri
Ada Pertanyaan ??? Jika tidak pertanyaan, saya akhiri Terima kasih

32 Tugas (Individu) Cari halaman Web di internet yang menurut anda Tidak Bagus!!! (Screenshoot 5 halaman) Berikan 15 alasan mengapa web yang anda temukan anda katakan bagus(berdasarkan referensi anda) !!!

33 Tugas (Kelompok) Cari client yang menurut anda perlu ddibuatkan suatu publikasi dalam bentuk website Berikan 15 alasan mengapa harus dipublikasi dalam bentuk web Definisikan audience website anda (referensi mengacu pada slide 6) Buat visual sitemap