Presentasi sedang didownload. Silahkan tunggu

Presentasi sedang didownload. Silahkan tunggu

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

Presentasi serupa


Presentasi berjudul: "Desain Web dengan Framework MATA KULIAH :DESAIN WEB Oleh : Denny Sagita R, S.Kom., M.Kom TAHUN AJARAN 2013/2014 SEMESTER GANJIL."— 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi Start With a Plan Determining the site’s purpose – 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi

9 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi Web Safe Color #RGB 216 Web-safe Color

11 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi Bad Design Example online.com/frames.htm online.com/frames.htm

13 Desain Web Mata Kuliah Wajib Sistem Informasi

14 Desain Web Mata Kuliah Wajib Sistem Informasi 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

15 Desain Web Mata Kuliah Wajib Sistem Informasi

16 Desain Web Mata Kuliah Wajib Sistem Informasi

17 Desain Web Mata Kuliah Wajib Sistem Informasi

18 Desain Web Mata Kuliah Wajib Sistem Informasi

19 Desain Web Mata Kuliah Wajib Sistem Informasi

20 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem 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

22 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi

25 Desain Web Mata Kuliah Wajib Sistem Informasi

26 Desain Web Mata Kuliah Wajib Sistem Informasi

27 Desain Web Mata Kuliah Wajib Sistem Informasi

28 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi Grid Example

30 Desain Web Mata Kuliah Wajib Sistem Informasi

31 Desain Web Mata Kuliah Wajib Sistem Informasi

32 Desain Web Mata Kuliah Wajib Sistem Informasi 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 Desain Web Mata Kuliah Wajib Sistem Informasi 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


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

Presentasi serupa


Iklan oleh Google