{"id":817,"date":"2017-12-20T15:40:51","date_gmt":"2017-12-20T08:40:51","guid":{"rendered":"http:\/\/www.yellowweb.id\/blog\/?p=817"},"modified":"2017-12-20T16:16:44","modified_gmt":"2017-12-20T09:16:44","slug":"sejarah-hamburger-icon","status":"publish","type":"post","link":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/","title":{"rendered":"Sejarah Hamburger Icon"},"content":{"rendered":"

Pernahkan teman-teman menjumpai gambar atau icon 3 baris bar yang bertumpuk pada saat membuka sebuah aplikasi, mungkin itu di web browser atau bahkan di aplikasi mobile android dan IOS. Biasanya disana terdapat menu atau pilihan tambahan, dari sebuah fitur aplikasi tersebut. Artikel ini akan membahas seputar asal-usul 3 baris bar tersebut,
\n<\/p>\n

Hamburger Icon, itu sudah merupakan sesuatu yang paling mendasar dan penting dalam sebuah website dan aplikasi mobile.
\nPenciptanya adalah Norm Cox<\/a> untuk perusahaan Xerox Star.
\nBerikut kita bisa lihat pada gambar dibawah ini:<\/p>\n

\"hamburger-icon.gif\"<\/a>

hamburger-icon.gif<\/p><\/div>\n

\u201c<\/i>Its graphic design was meant to be very \u201croad sign\u201d simple, functionally memorable, and mimic the look of the resulting displayed menu list. With so few pixels to work with, it had to be very distinct, yet simple. I think we only had 16\u00d716 pixels to render the image. (or possibly 13\u00d713\u2026 can\u2019t remember exactly).\u201d<\/i><\/p><\/blockquote>\n

Setelah Xerox Star, sempat menghilang beberapa saat, namun kemudian dipopulerkan kembali.<\/p>\n

Semakin berkembangnya perangkat mobile yang pada saat itu berada diukuran 4inci, membuat para designer berpikir keras bagaimana membuat sebuah desain aplikasi yang minim ukuran namun tetap terlihat jelas dan tentunya secara estetika tertap terliaht menarik.<\/p>\n

Tidak begitu pasti aplikasi apa yang kali pertama menggunakan Hamburger Icon, namun disini ada beberapa aplikasi yang terlihat menggunakan icon tersebut diantaranya, sebagai berikut:<\/p>\n

Voice Memos dari IOS<\/strong>
\nPertama kali terlihat pada aplikasi Voice Memos yang terdapat pada IOS, yang terdapat pada iPhone 3Gs. Ketika tombol ditekan pada aplikasi tersebut, maka akan memunculkan pilihan disana terlihat ditampilkannya beberapa catatan hasil rekaman.<\/p>\n

\"shorten-voice-memo-recordings-iphone.jpg\"<\/a>

Voice Memos on IOS iPhone 3Gs<\/p><\/div>\n

Facebook menjadikannya sebuah trend tersendiri.
\n<\/strong><\/p>\n

\"facebook3_iPhone_screen_ars.jpg\"<\/a>

Facebook on IOS<\/p><\/div>\n

Tampak terlihat pada tampilan aplikasi Facebook, disana terlihat ada icon berupa grid yang pada saat kemunculannya sekitar tahun 2008, kemudian sedikit perlahan berubah hingga saat ini menjadi 3 bar yang saling bertumpuk. Hal ini dilihat oleh Apple sebagai penggunaan icon yang tepat, mengingat ukuran layar yang begitu kecil. Penggunaan icon ini kemudian banyak diikuti oleh para designer aplikasi dan bahkan hingga web.<\/p>\n

\"q9S0JABytj.gif\"<\/a>

Slide<\/p><\/div>\n

Untuk saat ini desain Hamburger Icon ini tidak dapat terpisahkan dari kalangan UI\/UIX. Ada yang pro dan kontra dari segi desain, namun sekali lagi icon ini merupakan sesuatu yang harus dan pokok dalam mendesain sebuah aplikasi dan untuk saat ini belum tergantikan.<\/p>\n","protected":false},"excerpt":{"rendered":"

Pernahkan teman-teman menjumpai gambar atau icon 3 baris bar yang bertumpuk pada saat membuka sebuah aplikasi, mungkin itu di web browser atau bahkan di aplikasi mobile android dan IOS. Biasanya disana terdapat menu atau pilihan tambahan, dari sebuah fitur aplikasi tersebut. Artikel ini akan membahas seputar asal-usul 3 baris bar tersebut,<\/p>\n","protected":false},"author":1,"featured_media":818,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[168,391,392,100,3],"class_list":["post-817","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-berita-teknologi","tag-apps","tag-icon","tag-ios","tag-mobile","tag-web"],"yoast_head":"\nSejarah Hamburger Icon - YELLOWWEB.ID<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Sejarah Hamburger Icon - YELLOWWEB.ID\" \/>\n<meta property=\"og:description\" content=\"Pernahkan teman-teman menjumpai gambar atau icon 3 baris bar yang bertumpuk pada saat membuka sebuah aplikasi, mungkin itu di web browser atau bahkan di aplikasi mobile android dan IOS. Biasanya disana terdapat menu atau pilihan tambahan, dari sebuah fitur aplikasi tersebut. Artikel ini akan membahas seputar asal-usul 3 baris bar tersebut,\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/\" \/>\n<meta property=\"og:site_name\" content=\"YELLOWWEB.ID\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-20T08:40:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-20T09:16:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg?fit=600%2C290&ssl=1\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"290\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"yellowweb\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"yellowweb\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/\"},\"author\":{\"name\":\"yellowweb\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"headline\":\"Sejarah Hamburger Icon\",\"datePublished\":\"2017-12-20T08:40:51+00:00\",\"dateModified\":\"2017-12-20T09:16:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/\"},\"wordCount\":394,\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/sejarah.jpg\",\"keywords\":[\"apps\",\"icon\",\"ios\",\"mobile\",\"web\"],\"articleSection\":[\"Berita Teknologi\"],\"inLanguage\":\"en-GB\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/\",\"name\":\"Sejarah Hamburger Icon - YELLOWWEB.ID\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/sejarah.jpg\",\"datePublished\":\"2017-12-20T08:40:51+00:00\",\"dateModified\":\"2017-12-20T09:16:44+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/sejarah.jpg\",\"contentUrl\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/wp-content\\\/uploads\\\/2017\\\/12\\\/sejarah.jpg\",\"width\":600,\"height\":290,\"caption\":\"Sejarah Hamburger Icon\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/sejarah-hamburger-icon\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Sejarah Hamburger Icon\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/\",\"name\":\"YELLOWWEB.ID\",\"description\":\"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/#\\\/schema\\\/person\\\/75188044e080844724e381ab6a5b9829\",\"name\":\"yellowweb\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g\",\"caption\":\"yellowweb\"},\"sameAs\":[\"https:\\\/\\\/www.yellowweb.id\"],\"url\":\"https:\\\/\\\/www.yellowweb.id\\\/blog\\\/author\\\/yellowweb\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Sejarah Hamburger Icon - YELLOWWEB.ID","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/","og_locale":"en_GB","og_type":"article","og_title":"Sejarah Hamburger Icon - YELLOWWEB.ID","og_description":"Pernahkan teman-teman menjumpai gambar atau icon 3 baris bar yang bertumpuk pada saat membuka sebuah aplikasi, mungkin itu di web browser atau bahkan di aplikasi mobile android dan IOS. Biasanya disana terdapat menu atau pilihan tambahan, dari sebuah fitur aplikasi tersebut. Artikel ini akan membahas seputar asal-usul 3 baris bar tersebut,","og_url":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/","og_site_name":"YELLOWWEB.ID","article_published_time":"2017-12-20T08:40:51+00:00","article_modified_time":"2017-12-20T09:16:44+00:00","og_image":[{"width":600,"height":290,"url":"https:\/\/i0.wp.com\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg?fit=600%2C290&ssl=1","type":"image\/jpeg"}],"author":"yellowweb","twitter_card":"summary_large_image","twitter_misc":{"Written by":"yellowweb","Estimated reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#article","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/"},"author":{"name":"yellowweb","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"headline":"Sejarah Hamburger Icon","datePublished":"2017-12-20T08:40:51+00:00","dateModified":"2017-12-20T09:16:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/"},"wordCount":394,"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg","keywords":["apps","icon","ios","mobile","web"],"articleSection":["Berita Teknologi"],"inLanguage":"en-GB"},{"@type":"WebPage","@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/","url":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/","name":"Sejarah Hamburger Icon - YELLOWWEB.ID","isPartOf":{"@id":"https:\/\/www.yellowweb.id\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#primaryimage"},"image":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#primaryimage"},"thumbnailUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg","datePublished":"2017-12-20T08:40:51+00:00","dateModified":"2017-12-20T09:16:44+00:00","author":{"@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829"},"breadcrumb":{"@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/"]}]},{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#primaryimage","url":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg","contentUrl":"https:\/\/www.yellowweb.id\/blog\/wp-content\/uploads\/2017\/12\/sejarah.jpg","width":600,"height":290,"caption":"Sejarah Hamburger Icon"},{"@type":"BreadcrumbList","@id":"https:\/\/www.yellowweb.id\/blog\/sejarah-hamburger-icon\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.yellowweb.id\/blog\/"},{"@type":"ListItem","position":2,"name":"Sejarah Hamburger Icon"}]},{"@type":"WebSite","@id":"https:\/\/www.yellowweb.id\/blog\/#website","url":"https:\/\/www.yellowweb.id\/blog\/","name":"YELLOWWEB.ID","description":"Kursus Web Design | Kursus Web Programming | Mobile Web Apps | Digital Marketing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.yellowweb.id\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.yellowweb.id\/blog\/#\/schema\/person\/75188044e080844724e381ab6a5b9829","name":"yellowweb","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5afd1bfac26e9377e8f5e36afb624cf3690dd31cb07c3961dfbc736b9ff1912f?s=96&d=mm&r=g","caption":"yellowweb"},"sameAs":["https:\/\/www.yellowweb.id"],"url":"https:\/\/www.yellowweb.id\/blog\/author\/yellowweb\/"}]}},"_links":{"self":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/817","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/comments?post=817"}],"version-history":[{"count":10,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/817\/revisions"}],"predecessor-version":[{"id":832,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/posts\/817\/revisions\/832"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media\/818"}],"wp:attachment":[{"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/media?parent=817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/categories?post=817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yellowweb.id\/blog\/wp-json\/wp\/v2\/tags?post=817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}