advencing

your

bussines

is our goal

We Specialist in

Creative Branding Web Design Digital Marketing

Portfolio About

About me

Hello

We'reAuvha Labs

Is a Creative Agency based in Semarang Indonesia.

Our belief is to be the best in what we do and work with the best people in what we don’t do.

Auvha Labs adalah Creative Agency yang memfokuskan pada pelayanan kebutuhan desain digital dan branding. Wawasan dan ide adalah oksigen kami dalam membangun brand dan membentuk reputasi.

What we do

Branding

Your brand is your breath. Membantu perusahaan/ organisasi/ lembaga berkembang positif dan bertahan lama sesuai visi, melalui strategi branding terpogram.

Web Design

Your website is your identity-gate. Menciptakan rancangan situs exceptional, mengekpresikan identitas perusahaan/ organisasi/ lembaga melalui kolaborasi nilai seni dan fungsi.

Digital Marketing

Digital is just the platform. Menciptakan konten digital yang mendorong manusia saling berkoneksi, beraksi, dan membangun, melalui kombinasi data insights dan design thinking.

Portofolio

We collaborate with our clients to deliver transformative results

Infografis Beritagar.id

Infografis Beritagar.id

Selengkapnya
Situs MarjinBola

Situs MarjinBola

Selengkapnya
Company Profile PT Citra Data

Company Profile PT Citra Data

Selengkapnya
Poster Unity of Science UIN Walisong Semarang

Poster Unity of Science UIN Walisong Semarang

Selengkapnya
Buku Torehan Sejarah Bawaslu Jawa Tengah

Buku Torehan Sejarah Bawaslu Jawa Tengah

Selengkapnya
Buku Pendidikan Agama Islam dan Budi Pekerti Kemenag RI

Buku Pendidikan Agama Islam dan Budi Pekerti Kementerian Agama RI

Selengkapnya

our service

Branding Identity
  • Logo
  • Panduan Brand identity
  • Iklan Terintegrasi
  • Brand Manual Book
  • Packaging
Editorial & Copywriting
  • Annual Report
  • Company Profile
  • Majalah
  • Corporate Book
  • Dokumen Internal
Advertising & Campaign
  • Brochure, Leaflet, Pamflet
  • Banner,Billboard & Poster
  • Promotional Tools
  • Merchandise & Design T-Shirt
  • Infografis
Digital Marketing
  • Website Development
  • Desain Web
  • Konten Pemasaran
  • Social media integration

punya ide?

Mari bekerja sama!

Ceritakan kepada Kami kisah perusahaanmu, visimu, atau impian besarmu.

Kami akan dengan senang hati mewujudkannya, bersama Kamu!

Mulai Chat

857

LINES OF CODE

45

COFFEE CUPS

568

BOOKS

245

GIFTS

clients

lawwana
gurungaji
recontruksi
attaharruriyah
beritagar
kemenagri
citradatanus
elsapress
situskakek
uinws
marjinb
walk
nujateng
3barriles
kolomnesia

Blog

Tampilkan postingan dengan label Tips dan Tutorial. Tampilkan semua postingan
Tampilkan postingan dengan label Tips dan Tutorial. Tampilkan semua postingan

Cara Mengganti Background Foto dalam waktu 2 Menit


Hal utama yang perlu diperhatikan saat mengganti background foto yaitu proses menghapus backgroundnya terlebih dahulu. Pada proses ini masing-masing desainer memiliki teknik dan tool tertentu yang disukai. Beberapa ada yang mengutamakan kepraktisan dan kecepatan waktu. Ada pula yg mengedepankan kedetailan dengan konsekuensi mamakan waktu lama.

Ketika mengerjakan deadline, bagi saya menghapus background termasuk salah satu bagian menjenuhkan. Demi mendapatkan background yang transparant, tenaga dan waktu pun harus terkuras gara-gara tahap ini. Bagian yang sepele tapi serta merta tidak dapat disepelekan saat mengerjakan projek.

Belum lagi kalau harus menghadapi teman atau orang dekat yang tiba-tiba datang minta tolong editin foto. Sebagai desainer pemula, kejadian seperti itu sangat dilematis. Mau menolak sungkan, kalau diiyakan, diri sendiri yang babak belur

Untuk mengantisipasi hal demikian, tips ini bisa kamu coba. Baik untuk mengerjakan projek, maupun sekedar ngeditin foto teman. Tidak cukup itu saja, kalau kamu membagikan tips ini ke temanmu, temanmu bisa mengedit fotonya sendiri, jadi hal dilematis seperti pengalaman ku tadi tidak kamu alami.

Atau jika kamu bukan seorang desainer dan termasuk orang yang tidak memiliki kemahiran mengoprasikan aplikasi desiain apapun, cara ini sangat efektif untuk meminimalisir biaya edit foto.

Nah, sudah gak sabar pengen tahu tipsnya? Langsung aja yaaa….

  1. Pertama-tama Buka situs remove.bg dari browser gadget kamu!

Nanti akan muncul tampilan seperti ini.


  1. Upload gambar/foto kamu.

Caranya klik tombol Upload Image berwarna biru. Lalu pilih foto yang mau kamu hapus backgroundnya. 


Tunggu proses unggah tuntas. Lama cepatnya proses ini tergantung pada ukuran gambar yang mau dieksekusi. Semakin besar ukurannya, tentu semakin lama prosesnya.

  1. Ganti warna Backgroundnya.


Setelah proses uplaod selesai, pilih tombol Edit, nanti akan muncul seperti ini.


Kamu bisa custom backgrund dengan gambar yang kamu inginkan. Atau jika yang kamu butuhkan background foto resmi, kamu tinggal klik color aja, akan ada banyak warna solid yang bisa kamu pakai. Instan benget pokoknya.

  1. Download Gambar

Kalau kamu sudah menemukan background yang kamu inginkan, tahap terakhir, langsung klik tombol Download. Selesai deh. 


Selamat, kamu berhasil edit background foto kamu. Mudah kan? Kalau koneksinya lancar, semua tahap diatas dalam 2 menit bisa selesai.

Selamat mencoba...

Kalau kamu punya kritik, saran, pertanyaan atau usulan tips lain, kamu bisa tulis dikolom komentar juga

Terima kasih

Menentukan Ukuran Font untuk Web Responsif


Saat mendesain situs web, apakah kamu sering mengalami kesulitan menentukan ukuran font? Atau pernahkah kamu kebingungan saat menyesuakian ukuran font pada tampilan dekstop dengan ponsel? Dalam postingan ini, kami akan membahas tentang bagaimana panduan ukuran font pada web dari Erik D. Kennedy (founder learnui.design). Panduan ini terbagi menjadi dua, yaitu Tipografi pada situs ponsel, dan Tipografi pada situs dekstop.

Daftar Isi

  1. Tipografi Pada Mobile Web
  2. Tipografi Pada Web Dekstop

PANDUAN TIPOGRAFI PADA MOBILE WEB

Di dunia desain, tidak ada panduan paten dalam menentukan suatu element grafis, termasuk font. Memilih ukuran font untuk situs ponsel bukan ilmu yang pasti. Sebagai alternatif, kami akan menjelaskan bebrapa panduan beserta ulasannya untuk mempermudah kamu saat mengerjakan proyek desain.

1. Font Body harus sekitar 16px




Ukuran setiap font tidak bisa di sama ratakan, font yang berbeda akan menghasilkan tampilan ukuran yaang berbeda pula. Beberapa jenis font dengan menggunakan ukuran yang sama persis, hasilnya bisa lebih atau kurang terbaca mata. Karena itu, 16px adalah pijakan terbaik untuk memulai dan menentukan ukuran default font situs ponsel kamu. Default tersebutlah yang kemudaian manjadi acuan menentukan ukuran paragraf, label, menu, dan daftar pada situs.

(Silakan adalah pilih font terbaik pilihan kamu, kemudian set pada ukuran 16px)

Kebanyakan orang, mungkin termasuk kamu, menginginkan teks body dalam ponsel dapat terbaca dengan baik sebagimana seperti membaca teks buku cetak (saat dipegang dan dibaca pada jarak alami.)

Berikut proses settingnya:

A) Mulailah dengan 16px;
B) Kemudian ekplorasi ukuran font, caranya yaitu perkecil atau perbesar nilai pixelnya dengan mempertimbangkan hal berikut:
Dari 16px, Perkecilkan ukuran font Jika: a) halaman situs yang kamu rancang memiliki banyak tombol interaksi, atau b) Kamu menggunakan font dengan karekter yang sangat besar dan mudah dibaca (Seperti Nova pada gambar diatas).
Perbesar ukuran fontnya jika: a) halaman situs yang kamu desain memiliki banyak paragraf atau padat teks, atau b) font yang kamu pilih sangat sulit dibaca pada ukuran 16px (seperti Futura di atas). 

Meskipun begitu, ada beberapa subjektivitas terhadap ukuran font utama terbaik untuk digunakan pada halaman situs.

2. Ukuran teks input minimal 16px

Hal terpenting saat mendesain situs atau aplikasi yamg dapat diakases melalui mobile, yaitu gunakan ukuran font minimal 16px untuk teks input. Jika ukuran input text kamu ukuran font-nya lebih kecil dari itu, browser iOS akan memperbesar di sisi kiri teks, sisi kanan di kaburukan (keluar dari area display) sehingga memaksa user memperkecil secara manual. Tentunya ini mempersulit penggguna.
Perhatikan visual dibawah:



Disnilah alasan kuat kenapa harus membuat ukuran font tubuh 16px atau lebih besar juga. Akan tetapi jika ukurannya lebih besar dari 16px, membuatnya terlihat canggung karena memiliki teks control form yang lebih besar daripada teks paragraf.

3. Teks sekunder harus sekitar 2 ukuran lebih kecil dari teks paragraf

Teks sekunder biasanya ditarapkan pada label yang lebih kecil, copyright, footer dsb. Menurut Erik sebaiknya menggunakan ukuran sedikit yang lebih kecil dari default, sekitar 13px atau 14px. Erik tidak merekomendasikan turun hanya satu angka, karena beresiko menbingungkan user saat melihat teks primer dan sekunder.

Selain itu, dalam penataan teks sekunder atau bagian yang kurang penting, biasanya desainer ingin menginformasikan secara jelas elemen atau bagian tersebut tidaklah penting, sehingga dibuat untuk tidak terlalu menarik perhatian user. Semisal dengan menggunakan warna abu-abu yang lebih terang dari pada teks utama.

4. Selalu melihat hasil desain pada device yang sebenarnya.

Dibandingkan poin-poin sebelumnya, melihat hasil desain pada perangkat ponsel secara langsur menjadi standar emas. Beberapa browser populer seperti Chroome dan mozila, memliki tool yang membuat halama situs pada layar dekstop menjadi seukuran ponsel. Namu praktik ini tidaklah cukup karena feel/ nuansa desain situs atau aplikasi selluler pada laptop jauh berbeda.

Erik sering terkejut saat membuka halaman situs yang dia desain pada perangkat ponsel. Ukuran font, spasi, semuanya mati. Jadi, meskipun kamu sdah menggunakan Sketch Mirror, Figma Mirror atau aplikasi apa pun yang masuk akal untuk kamu, tetaplah lihat hasil desainmu di perangkat ponsel yang sebenarnya.

5. Membiasakan diri dengan Material Desiain dan Standar Ponsel

Tidak ada salahnya untuk mengetahui sistem design yang dipakai pada ponsel. Dengan membiasakan mengamati dan mencari tahu style desain pada perangkat ponsel, kamu bisa mempertimbangkan keseuasian material desiain terhadap perangkat sebenarnya.

Misalnya: Ukuran font default Material Desain adalah 16px Roboto dan ukuran font sekunder adalah 14px. Sedangkan Ukuran font default iOS adalah 17px SF Pro dan ukuran font sekunder adalah 15px. Apakah kamu perlu menyalin style iOS tersebut? Tidak - tetapi tidak ada salahnya memiliki aturan dasar untuk dibandingkan.

PANDUAN TIPOGRAFI WEB DESKTOP

Sebelum menentukan ukuran default pada web dekstop, Erik membagi tipe halaman situs menjadi 2 bagian besar:
  1. Text-heavy pages (Halaman dengan Teks Padat), yaitu halaman situs yang memiliki tujuan utama membuat user/membaca isi halaman, seperti artikel, blog, berita, dll. Tipe halaman ini tidak memiliki banyak tombol atau fitur interaksi, bahkan terkadang hanya link/tautan saja yang ditampilkan.
  2. Interaction-heavy pages (Halaman dengan interaksi padat.), yaitu halaman yang didalamnya diperlukan banyak interaksi, seperti mengklik tombol, mencari item dalam daftar, mengedit, mengetik dll. Terkadang ditemukan teks panjang pada halaman ini, tetapi teks tersebut bukan hal yang harus dibaca user secara langsung seperti pada tipe Text-heavy pages.
Agar mudah memahaminya, halaman situs yang saat ini sedang kamu baca sekarang, adalah contoh dari type Text-heavy pages. Pada halaman ini kamu hanya diarahkan untuk membaca, tidak dibutuhkan interaksi. Saat kamu membuka situs facebook, kamu akan disuguhkan tampilan login di kanan atas, dan form registrasi dibawahnya. Pada halaman itu, pengunjung baru diarahkan untuk mengetik, mengisi email, sandi dan melengkapi pendfataran hingga akhirnya megkilik tombol sign up (mendafatar). Terjadi banyak interaksi bukan? Benar sekali, dalam hal ini, facebook termasuk kedalam tipe Interaction-heavy pages. Baik Text-heavy pages maupun Interaction-heavy pages, memiliki aturan yang sedikit berbeda. Sehingga untuk menentukan ukuran fontnya pun akan berbeda pula.

Text-Heavy Pages

tipe halaman ini, sebaiknya menggunakan ukuran font yang lebih besar dari ukuran default (16px). Agar pembaca betah lama membacanya, sajikanlah font yang tidak membuat pembaca tegang dan lelah di mata. Setiap font memilik kesan yang berbeda untuk pembaca, meskipun menggunakan ukuran yang sama.

16px – ini adalah ukuran minimum untuk type Text-Heavy Pages pada dekstop.
18px – ini adalah ukuran font yang lebih baik untuk memulai. Ingat, Kamu tidak sedang mensajikan tulisan cetak dari dokumen Word satu spasi; Kamu menulis untuk orang yang duduk beberapa kaki dari monitor mereka yang sudah berumur puluhan tahun
20px + - ukuran ini mungkin terasa aneh dan terlalu besar pada awalnya, tetapi selalu layak untuk dicoba di aplikasi desain mu. Bahkan, medium.com Situs type Text-Heavy Pages yang polpuler dan memiliki tampilannya yang cantik di web memiliki ukuran teks artikel standar 21px.



Point utamanya, seperti halnya yang disebutkan pada bagian panduan tipografi pada mobile web diatas, teks situs di web harus dapat dibaca seperti saat membaca buku cetak. Melihat text pada layar monitor komputer tidak bisa disamakan dengan melihat text pada buku yang di cetak pada lembaran kertas. Untuk menemukan formula yang tapat ini, Erik bahkan melakukan latihan khusus yang menurutnya menyebalkan dan konyol. Kalau kamu ingin mencobanya juga, latihannya adalah membaca buku cetak dengan menutup satu mata atau dengan meyipitkan kedua mata. Apakah ukuran font yang kamu pilih dapat dibaca bahkan pada jarak beberapa kaki? Bahkan sudah sesuaikah untuk mata muda dan kuat kamu? Cobalah, maka kamu akan menemukan jawabanya.

Interaction-Heavy Pages

Jika pada tipe Text-Heavy Pages sebelumnya menggunakan ukuran font diatas 16px, untuk tipe Interaction-Heavy Pages ukuran text yang kecil lebih direkomendasikan. Tergantung pada jumlah data informasi yang diambil user sekaligus. Untuk tipe ini, teks berukuran 18px termasuk terlalu besar dan tidak nyaman.

Perhatikan Inboxfacebook di dekstop, twitter, atau situs apapaun yang menuntut user melakukan banyak klik. Atau lihat situs aplikasi web yang menunjukan data seperti google drive atau google calender pada dekstop. Kamu akan kesulitan menemukan paragraf teks 18px yang panjang. Normalnya tipe ini menggunakan ukuran 14px – 16px. Tentu saja kamu tidak mungkin menggunakan satu ukuran font saja, mungkin kamu akan menggunakan ukuran yang lebih besar dari 16px untuk bagian yang lebih penting (seperti headline, section-titles, dll) , atau menggunakan yang lebih kecil dari 14px untuk hal-hal yang kurang penting.



Untuk setiap Interaction-Heavy Pages, Ukuran font ditekan (top-down) beberapa nilai dari ukuran default, ini menyesuakan kebutuhan pada setiap bagian teks pada halaman situs.
Sebagai contoh:

Event Name dalam situs Google Calender 12px, yang merupakan gaya font yang sama sekali tidak ada dari pedoman Material Desain. Namun mengingat desainer google harus memasukkan 7 kolom pada layar yang hanya memiliki lebar 1440px, dan banyak acara yang cukup singkat, ukuran tersebut adalah pilihan yang ideal. Font yang ukurannya kecil membuat text sulit dibaca dan membuat pengunjung menderita, akan tetapi jika dibuat lebih besar, text pada event name akan terputus terlalu sering. Design is tradeoffs,Jika kamu tidak dapat menyebutkan pengorbanan yang kamu buat, mungkin kamu membuatnya di tempat yang salah.

Label jam sehari ("12 AM", "1 AM", dll.) Berukuran font: 10px. ini juga tidak ada pada pedoman Material Desain. Namun dikeranakan ruang horizontal yang sangat terbatas. Sedangkan setiap acara diberi label dengan waktu mulainya. Maka memili ukuran 10px pun tidak ada salahnya.Namu mengapa google tidak membuat label sebelah kiri lebih kecil?

Tanggal menggunakan ukuran 48px. Sekali lagi, ini juga tidak ada dalam pedoman Material Desain. Mengapa desainer google calender tidak menggunakan 45px, yang merupakan ukuran "Display 2" resmi.

Saat mendesain situs web desktop Interaction-Heavy Pages, Kamu perlu mengubah style teks berdasarkan kasus per kasus. Konsistensi adalah segalanya, tetapi tidak ada yang marah ketika ukuran font satu pixel terlalu kecil. Tapi akan ada yang marah marah ketika mereka tidak dapat dengan mudah menemukan apa yang mereka cari.

Beberapa Font-Size yang Memungkinkan

Salah satu kesalahan terbesar Tipografi dari perancang UI awal adalah terlalu banyak menggunakan ukuran font. Bahkan halaman yang paling banyak interaksi biasanya dapat terlihat baik-baik saja dengan total sekitar 4 ukuran font.
Mari kita jabarkan:
  1. Header font size: yaitu ukuran font terbesar di halamanmu. Gunakan untuk headline (judul) atau section-titles (sub-judu). Jika Kamu memiliki judul dan sub-judul, Kamu harus menggunakan dua ukuran font yang berbeda di sini.
  2. Default font size. Ini adalah ukuran font yang paling umum pada halaman situsmu, dan harus digunakan untuk semua teks isi (termasuk beberapa tombol kontrol, seperti kotak teks, dropdown, tombol, dan menu). Kesalahan utama yang dibuat desainer pemula di sini adalah menggunakan banyak ukuran font untuk elemen yang semuanya harus satu ukuran font.
  3. Secondary font size. Ini adalah ukuran font yang Kamu gunakan untuk detail situs yang kurang penting. Informasi dan statistik pendukung, kadang-kadang teks, dll. Biasanya sekitar 2pt lebih kecil dari ukuran font default kamu.
  4. Tertiary/caption/label/wildcard font size, Selain ketiga ukuran diatas, kamu membutuhkan satu lagi ukuran font. Terkadang karena informasi yang kamu sajikan sangat hierarkis sehingga membutuhkan style tersier yang lebih tenang daripada gaya sekunder. Di lain waktu, kamu mungkin menggunakan style uppercase untuk label atau tombol, namun karena uppercase tersebut mengakibatkan berat visual meningkat, Kamu mengubahnya dengan ukuran yang sedikit lebih kecil untuk teks itu sendiri. Jadi ukuran font keempat ini sedikit wildcard. Tidak semua desain membutuhkannya, tetapi banyak yang membutuhkannya.

Oleh: Danil Aufa
auvha-logo-vsg

Say hello to Danil,
our director art