{Fancy Website Building Tips} (1) Make it “Kawaii” with 5 mins & 10 coding lines!

Pls Don’t Leave My Page !! 🥺 — from my yet unpublished website
Caption — from Designer Erik Bue’s website (http://erikbue.com)
Copyright Comment — from Designer Gabriel Valdivia’s website (https://www.gabrielvaldivia.com)
Copyright Comment — from Designer Erik Bue’s website (http://erikbue.com)

Don’t you want to make your website visitors feel entertained and and enjoyable like these designers?

As an aspiring UX Designer, I’ve been personally working on my website on my own. Indeed, it is totally okay to make your own webpage and decorate one utilizing website building platforms (e.g. most popular ones — Wix, SquareSpace, Wordpress, for artistic website making — Cargo , or if you know some generic terms for HTML&CSS elements, WebFlow might be a good choice… )

However, while I was searching the one among those numerous platforms, I realized that what I want for my website had to be built by my own hand, as all of the senior designers that I look up to had their own webpages built by their own. Why?

Advantage 1. The webpage built from scratch by you, a designer, is more likely to show your own aesthetics, personalities, and even your characters

It makes not only your website accessible, but even themselves as a person behind the screen!
Making your webpage on your own may be most powerful personal branding tool for designers.

AGRAF 1.jpeg

Compared to the process of making website utilizing platforms: it is hard to make every single elements that works exclusively for you. However, some cute effects are absolutely easy to put in when you make it on your own.

Furthermore, for UX/UI/Product designers who work closely with Developers might get more attention from recruiters, as it

Advantage 2. Levels Up Your Value.

It gives the impression that you can effectively communicate with Developers compared to other designers.

So I just thought that it would be better to just build one on my own!
And Okay okay, now I will dive in to some tips that I’ve enjoyed while making my webpage.

1. Change the Highlighted Color when Dragged

I love Brown color 🐻🤎🤍

CSS Code::
Insert this on your css code in the beginning. This should be working on every part of your webpage, so there is no specific selector in front of psuedo class
::selection .

::-moz-selection {background: rgba(211, 199, 192, 0.4);/* color: #fff; */}::selection {background: rgba(211, 199, 192, 0.4);/* color: #fff; */}

I only put background color that resonates well with my webpage theme color; I did not want too much change on my webpage while dragging.

However, if you want the text color to change, you can definitely try it on yours. Below is the example!

This one is also nice. Which one do you prefer?
::-moz-selection {background: #a69082;color: #fff;}::selection {background: #a69082;color: #fff;}

Tips for Usability:
I recommend you to use transparency when working on black text color. On the other hand, put some dark colors (maybe without transparency) when working on white or bright font color.

2. Make your Top Webpage Bar Intriguing

Pls Don’t Leave My Page !! 🥺

Javascript code ::
You can paste this on your javascript file with your own phrase that would effectively catch the viewer’s eyes.

var pageTitle = document.title;var attentionMessage = 'Missing you...';document.addEventListener('visibilitychange', function(e) {var isPageActive = !document.hidden;if(!isPageActive){document.title = attentionMessage;}else {document.title = pageTitle;}});

Don’t Forget to embed javascript file code in your index.html file!
For someone who might not know… Insert the below code just before “body” tag in HTML file.

<script defer src="/script.js"></script>

3. Add witty Copyright Comments

I truly believe in it. ☺️

HTML Code::

<div class="container footer-grid"><div class="copyright"><p class="copyright-name">&copy; <span class="year">2021</span> by Yunbin Bae</p><p class="copyright-belief">With the belief in the power of <br>technology’s uniting people & world</p></div></div>

I am just a toddler in my Front-End code learning journey. But as those were the ones that made me decide to code on my own, I’m so glad to share these codes with you. Hope everyone who reads this could effectively use them in your own portfolio websites and feel the same joy with me!

If there’s anything that I’ve done wrong, please leave a comment below for everyone. Thanks for reading!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store