Let me take you to a virtual tour of the lesser-known masterpiece rock garden in Kyoto that transports you to an imaginary lake sailing.
You are sailing on a lake
dyed red at sunset.
By the time the full moon rises,
you change to a small houseboat
in which you join a tea ceremony
while staring at the moon
reflected on the lake…
This is an experience you can have just by seeing waterless gardens at Koho-an Temple, a hidden gem in Kyoto:
You’ve probably never heard of Koho-an Temple, which rarely opens its door to the public. Last month, I had a rare chance to visit the temple and attend a tea ceremony held in its critically-acclaimed teahouse called Bosen.
Gardens are seamlessly…
How I’ve used a web font’s glyph of asterisk as a place markers in a web app with embedded Google Maps
TL;DR
This article describes:
- How to add place markers to Google Maps embedded in a web page (Sections 2 and 3)
- How I’ve changed the shape of place markers to an asterisk from Google Fonts (Section 4)
- How I’ve chosen (and coded) the color of place markers for both light and dark modes (Sections 5 and 6)
1. Motivation
I’m making a web app called My Ideal Map App, which aims to improve the UX of Google Maps. The core feature is to let the user save the places of their interest and then to show these saved places around the user’s current…
TL;DR
This article describes three things:
- How I’ve created a custom dark mode theme of Google Maps to be embedded in a web app, by using Google Maps Platform style editor (Section 2)
- JavaScript coding techniques to switch on the dark mode map style after 6pm, and off after 6am, of the user’s local time. (Section 3)
- An example of the user experience to be achieved with this feature of the app that I’m making, for someone living in Kyoto, that is, me myself :-). (Section 5)
1. Motivation
I’m creating My Ideal Map App, a web app that improves the UX of…
TL;DR
This article describes
- How to customize the style of Google Maps to be embedded on a web page (Section 2)
- How I’ve designed the color scheme of Google Maps with Google Maps Platform’s style editor (Sections 3 and 4)
- How I’ve fine-tuned the visibility of place labels by zoom level (section 5)
1. Introduction
I’m creating a web app which embeds Google Maps in custom style.
I find it a bit tricky to customize the color scheme of Google Maps and to control the visibility of place labels by zoom level.
This article shares what I have learned about how to custom-style…
TL;DR
In the previous article, I discussed the importance of having a design concept before starting to design the user interface of an app (or anything to be designed). Design concept alone doesn’t help the design process, however. Designers need to visualize the concept with what is known as a mood board.
Here’s how I have created mood boards for the web app I’m creating, starting with an example of user experience that I want to achieve with the app called My Ideal Map App.
User Experience (Part 3): Save a place with a link
On my smartphone, I’m reading &Travel, an online travel magazine published by Asahi Shimbun (Japan’s broadsheet…
TL;DR
Before starting to design the user interface of an app, I believe it’s beneficial to find a design concept of the app first. A solid concept will guide each and every design decision throughout the project and, as a result, bring the visual consistency across all the design elements.
Here’s how I have found a design concept for the web app I’m creating, starting with an example of user experience that I want to achieve with the app called My Ideal Map App.
User experience in Kyoto #2
(See my previous post for #1).
I was at home planning my visit to Fukuda Art Museum…
TL;DR
Solving your own problem is the best way to start creating a SaaS on your own. Here’s how I’ve started creating My Ideal Map App, a web app that will improve the UX of Google Maps for my own personal use.
A user experience
A while ago, I was visiting an eyewear shop in central Kyoto to replace the lenses of my glasses.
After a consultation with the shop staff, I was told new lenses would be ready by 2:00 pm. I looked at the clock. It was around noon. …
Getting your website’s favicon right is incredibly complicated. This article puts together all you need to know about favicons.
NOTE: If you’re not a Medium member, read the ungated version of this article.
TL;DR
In the <head> element of your HTML document, insert
<link rel="icon" href="favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png"/>
<link rel="manifest" href="/site.webmanifest" />where site.webmanifest is a JSON file with the content like this:
{
"name": "Your website name",
"short_name": "A shorter version of your website name",
"icons": [
{
"src": "/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"theme_color": "#4a4a4a",
"background_color": "#4a4a4a",
"display": "standalone"
}- Change the values of
"theme_color"and"background_color"to your favicon design specification
Then create a favicon…
Material Design, Google’s UI design system, rejects the animation of flipping a card in response to the user clicking/tapping of it. Material Design’s official documentation clearly states this:
I wonder why. The documentation is quiet about it.
Maybe most people think it’s just a stylistic preference of Google’s designers. However, the more I learn about the nitty-gritty details of Material Design, the more convinced I am that Google’s designers, led by Matias Duarte, have built Material Design in a very logical manner. Which makes me think that there must be a solid reason for the rejection of card-flipping animation.
While…
We need to properly understand ARIA landmark roles to write the HTML code for toggling the appearance of a navigation menu with the hamburger menu button.
NOTE: This article was originally published in Dev.to.
1. Summary
Imagine you need to build a web site with a top app bar like this one:
And tapping the hamburger menu button on the left will open a navigation menu:
MasaKudamatsu
Designer-developer of Triangulum Color Picker (https://triangulum.netlify.app/) and Line-height Picker (https://line-height-picker.app/).
