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

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

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

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

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

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

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

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

Web Safe Color #RGB 216 Web-safe Color

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

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

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

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

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

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

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.

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 – http://960.gs

Grid Example

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

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) !!!

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