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.

A garden view from the inside of Teahouse Bosen at Koho-an Temple (image source)


How I’ve used a web font’s glyph of asterisk as a place markers in a web app with embedded Google Maps

Place markers customized as described in this article in light mode (left) and dark mode (right) (screenshot by the author)

TL;DR

This article describes:

  1. How to add place markers to Google Maps embedded in a web page (Sections 2 and 3)
  2. How I’ve changed the shape of place markers to an asterisk from Google Fonts (Section 4)
  3. 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…


A screenshot of embedded Google Maps styled as described in this article (screenshot by the author)

TL;DR

This article describes three things:

  1. 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)
  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)
  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…


A map of Arashiyama area in Kyoto, rendered in the custom style described in this article (screenshot by the author)

TL;DR

This article describes

  1. How to customize the style of Google Maps to be embedded on a web page (Section 2)
  2. How I’ve designed the color scheme of Google Maps with Google Maps Platform’s style editor (Sections 3 and 4)
  3. 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.


Mood boards I’ve created for the web app I’m currently creating

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.

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…


An image that visualizes, to some extent, the design concept I’ve found for the web app I’m currently creating

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.

User experience in Kyoto #2

(See my previous post for #1).


Custom-styled Google Maps to be shown as part of the user interface of the web app I’m currently creating.

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.


Getting your website’s favicon right is incredibly complicated. This article puts together all you need to know about favicons.

The recommended HTML code to deal with all the favicon files, with the mentioning of `favicon.ico` omitted for a good reason.

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" />
{
"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


A card with the photo of a woman in sunglasses and her name Elizabeth Park has started flipping. The image caption says, “Don’t. Cards don’t flip over to reveal information.”
A screen shot of Material Design documentation by Google

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.

1. Summary

Imagine you need to build a web site with a top app bar like this one:

Image source: Material Design

MasaKudamatsu

Designer-developer of Triangulum Color Picker (https://triangulum.netlify.app/) and Line-height Picker (https://line-height-picker.app/).

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