My Android Home Screen (Splatoon 3 design)


Hi there. This is “sita” who always slept 3 hours a night on the day before high school exams, because I was so absorbed in creating the home screen only before exams…

In this article, I will introduce my splatoon 3 design home screen, the rough way to make it, and its appeals.

Sorry, I have not translated it but I wrote about how to make Android home screen in Japanese. So, if you have interest, please read it with Google translation.


Introduction of my home screen

Previous works

3 years ago. One of my masterpieces. It is the base design of other works.
Splatoon design home screen Ver.1.
Current Splatoon 3 design home screen

As you see, I have only changed background wallpaper and little change the app positions. However, only changing wallpaper is even exciting.

By the way, my phone is Sony Xperia XZ2 compact which has vertically long screen. This is why the screenshots are vertically long.

Hidden features of my home screen

My home screen has only 1 page. This means that the home screen cannot be scrolled. You think “What? does he have very small number of apps?”, don’t you?

No. My home screen has a drawer and many gesture features.

The hidden features are following ones;

  • Long tap “Line” to launch “Twitter”
  • Long tap “Skype” to launch “Discord”
  • Long tap “Storage” to launch “Z-achiever(File decompression software)”
  • Long tap “Camera” to launch “Silent Camera”
  • Long tap “Music” to launch “Apple music”
  • Swipe down on “Setting” to check the network logs
  • Swipe up on “Setting” to run the “Greenify” command
  • Long tap Memo space to launch “Trello”
  • Double tap on free space to Call
  • Swipe up on free space bring calendar and task list widgets.
  • Swipe left on free space to open drawer. Swipe left again to display all apps.
App drawer (when swipe left on free space)

Do you think it looks confusing? But I’m a creator of this home screen. It is very convenient for me.

Is it similar to your idea from “Splatoon design home screen”? Some of you must be surprised about how free customizing the Android home screen. This is one of the reasons why I always choose Android phone.

The rough way to make the home screen

Most decorations are on wallpaper

As you see above images, the most decorations are drawn on the wallpaper. Only icons and widgets are displayed by launcher app.

The image set as wallpaper. Other white icons and widgets are displayed by launcher.

The app I’m using is Lightning Launcher

I have been using “Lightning Launcher” (Launcher is home screen app which launches your apps). When I got crazy about making home screen, it is a very innovative launcher app. But now, I think there are other apps which can edit same freely as “Lightning Launcher”. The normal launchers align icons neatly, in contrast, you can freely edit position, angle and size of icons in Lightning Launcher.

The way to edit home screen is like using PowerPoint.

The icon pack is “Whicons”

I’m using icon pack “Whicons” in icons of Setting, Play store, Chrome on my home screen. Icon pack is one kind of apps you can download from Play store. You can change the app icons entirely when icon pack is read by a compatible launcher.

I wanted to use simple and white icons. As a result, I chose “Whicons.”

The wallpaper is made using “Affinity Designer” (PC)

The Wallpaper is of course made by myself. If you want to make good quality wallpaper, I recommend you to use PC design software. But, PowerPoint and Excel are also ok.

The design software I personally recommend is Affinity designer. Simply put, this software is a cheap Illustrator. Of course you can use Illustrator, but if you feel it too expensive to use, Affinity designer is for you. It’s really cheap because it’s a outright purchase format, not a subscription format.

Affinity Designer: award-winning graphic design software
The perfect app for creatives and other professionals looking to create high-quality concept art, illustrations, logos, icons, UI designs, mock-ups and more.

Any software is ok if you can make wallpaper, but it is better to make the image in vector format. If you can make a vector image, you can output it beautifully even when your smart phone and the resolution of your screen is changed. It’s a great treasure time to look at your proud home screen with no-noise dot-by-dot wallpaper.

The images on this article have noises, however, the real home screen I’m looking on my phone has no-noise, perfectly beautiful and very very very…muhaha…hehehe…

Please read the below article if you want to know a little more about how to make home screen. Sorry, I have not translated it in English yet, but please read with Google translation if you want.


Reproduction of the official artworks

Ink splashes

Ink splashes are the most characteristic design of Splatoon. Of course, depending on your concept, it is not definitely necessary. However, it is easy for those who are not familiar with to understand your design is Splatoon inspired.

In contrast, only Splatoon manias can notice if you include Splatoon like design other than include ink splashes.

About the way to draw the splash pattern, I put the vertexes like the below figure. A pro designer would put more vertexes and adjust more meticulously, but I’m not the pro and bad at meticulous adjustment. So, I tried to reduce vertexes and made the curves natural as possible.

How to draw the ink splash pattern

In addition, consideration about law of nature makes your design more fresh. For example, the ink is spread intensely from center if you spilt ink from a high place, isn’t it? So, the direction of ink extension should be almost from center position. But on the contrast, personally, it looks not natural that the direction is completely from center.

Furthermore, gravity should work ink in both real world and a game Splatoon 2. This means making below part of ink pattern thicker seems nice. エモい(E-MO-I)! (Recently, Japanese twitter users, geeks, nards and so on often tell impressive things “E-MO-I” which means “It is emotional!”)

It becomes a little professional story, but considering the function of the curve makes your design more natural if you are a good scientist, engineer, mathematician or so on. I just trusted my instinct when draw the splash pattern because I’m bad at math. However, if you are one kind of researcher, it is better to draw your figures with considering functions of the curves.

I have told the long story and looks arrogant, but actually I have not been studying about design. What I want to say is that my comment is just for your reference…

Diagonal stripe pattern

The diagonal stripe pattern of two gray colors is often used in official Splatoon designs, for example, the game icon on Swtich home, SplatNet 2, and so on.

I wanted to pick the color from official artworks. However, the color combination was hard to see on my phone, so I made the color at that time.

The diagonal stripe pattern of two gray colors (my Splatoon design home screen Ver.1)
A stripe pattern which I referred (SplatNet 2)

Squid arrow mark

Squid like arrow mark is used not only as normal arrow mark, but also on background. I used this design too.

Squid like arrow mark (my Splatoon design home screen Ver.1)
Squid like arrow mark (SplatNet 2)

Reproduction of Splatsville style (Splatoon 3 style)

From here, I will talk about my designs referring to Splatoon 3. Basically, the designs are from official Splatoon 3 trailer. Splatsville style is so so so very cool and kill me.

A lot of Stickers and Seals

What I fell in love first with is a background of stickers pasted messily. I thought firstly making the background.

Honestly, I think there are few types of stickers on my background from Splatoon 3. I want to trace more official Splatoon 3 stickers!

By the way, I think “It looks like a street wall in a poor public security town.” at first. However, if you look closely at it, there are stickers on suitcase, air tickets, brochures, and so on. Is Splatsville a famous tourist spot, or is the next hero on a wandering journey? I can’t wait more information!

Background of stickers pasted messily (My current home screen)
Background of Splatsville style (Splatoon 3 trailer on YouTube)

Expression of weathering

Another characteristic design of Splatoon 3 is worn out textbox.

When I draw the expression of weathering, I imagined a black worn out cardboard. The damages of textboxes are like scratch mark from border.

In order to make damaged part gray, two almost same shapes are stacked and the black shape is drawn as more scratched.

Weathered stickers and textboxes (My current home screen)
Weathered textbox (Splatoon 3 trailer on YouTube). Official textboxes are more damaged!

Main Colors of Splatoon 3

I used the main colors of Splatoon 3 with using color picker. Designers focus on also making colors. Color is one of the very important factors that the artwork impresses viewers. This is why I took the main colors from official artworks.

Official artwork of Splatoon 3 on the website
シリーズ完全新作『スプラトゥーン3』が2022年に発売決定。新たに発見されたイカ・タコの生息地に関する記録映像も公開。 | トピックス | Nintendo
「スプラトゥーン」シリーズの完全新作、Nintendo Switch『スプラトゥーン3』が、本日放送された「Nintendo Direct 2021.2.18」で発表されました!ま

What I wanted to but I can’t due to time

Changing the fonts to Splatoon font

A lecture about UI design of Splatoon was held in Japan. In the lecture, a Splatoon designer said “A font is very important to express the world.” I’m convinced by this, so I want to change all fonts to Splatoon font in fact.

However, I don’t know how to change font of the clock widget. In addition, there are no official published font, and I need to make the font by myself or trace the each letter. I can’t be bothered.

Sorry, the link is a Japanese site. Please read it with google translation. The content is about an official presentation of Splatoon UI design in CEDEC by Splatoon developers.

任天堂『スプラトゥーン』UIデザインの舞台裏|娯楽のUI 公式レポート #2 | キャリアハック(CAREER HACK)

Adding Stickers and Seals traced from official artworks

There are many kinds of stickers and seals on Splatoon 3 artworks. The designer’s work must be hard…

In my opinion, the reason why my home screen is not so good is the design of them. However, I don’t have enough time to trace everything.

Adding ink dropping effect

In my first idea, I planned to put the black ink dropping effect when pushing the gear icon. However, making fluid animation looks tough, and animation effect has high battery consumption.


Is this article helpful…? I just wrote what I want to proud…

Anyway, let’s play Splatoon 3!! And let’s sink in the swamp of home screen creation!! Yeahhhhh!!!!

By the way, Japanese geeks “OTAKU” often express “addiction to something” as “沼にはまる(NUMA-NI-HAMARU)”.

“沼にはまる” means “sinking in the swamp”.