Desain Web: Konsep, Konteks, Konten, Prinsip Desain

Berikut ini adalah materi kuliah untuk mata kuliah Desain Web di Program Teknologi Informasi dan Ilmu Komputer. Adapun materi terkait yang terdapat dalam pertemuan I ini antara lain: Website and internet concept Web browser rendering process Phases of a web project Start with a plan Defining audience Gathering content Choosing the right tools Web safe color Good design and bad design Top No-Nos in the web Good deeds in web design Continue reading

Perfect Full Element Background Image With CSS3

An HTML element can have a background image. Normally we set it no-repeat, repeat-x, or repeat-y, regardless it is centered or x-y-positioned. There is time we may want it to be covered all over an element, regardless it’s size. Now, we can do this purely through CSS thanks to the background-size property now in CSS3. We’ll use the html element (better than body as it’s always at least the height Continue reading

CSS Box Model

HTML elements consists of inline and block elements. All of them are box models even for inline elements such as <em>, <span>, or <strong>. Each box has it’s own (default) border, margin, and padding size. Put the following CSS code to your web pages to see (the box) by yourself temporarily: * { border: 1px solid red !important; } With the above CSS, all elements will have a 1px solid Continue reading

Responsive Web Design

“Responsive Web Design” or RWD or a hashtag #rwd on Twitter has become a great plague in web design just like AJAX technologies which arise a few years ago. Almost all people uses AJAX to run their website. Nowadays, people are talking Responsive Web Design rather than CSS3 media queries technology like people are talking jQuery rather than the AJAX technologies itself. What is Reponsive Web Design? Responsive web design (often Continue reading

CSS Starter Snippets

Below is CSS starter to reset CSS properties which are predefined by web browsers. html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, Continue reading

UI/UX Design Principles

Combined with a User Experience Design (UXD/UED) with basic design principles, as explained in Swinburne Multimedia Design Tutorial may deliver a great experiences to user application in various media. The basic design principles explained, consists of: Proximity Visual Hierarchy Symmetry / Asymmetry Repetition Unity Contrast Dynamics Emphasis