This video is brought to you by Brilliant! Two weeks ago, I released a video about my
Ultimate iOS 16 home screen, and in it, I featured a widget that has caused a lot of
hype. Over 300000 views later, there was one prevalent comment that stood out!
I think it's time to show you how I created this Widget. Instead of recreating the same
one, however, I decided to design something different that follows absolutely the same
principle and structure. You can hopefully get inspired and create your rendition by
looking at both widgets. So, grab your snacks because this will be a longer-than-usual video,
and let's dive in by first overviewing the Namib Desert Widget. OH, before I get too
excited, I will pack the new Widget in a product for those who don't like to tinker and just
want to install it and support a creator while at it. Let's go back to the overview
I called this Widget the Namib Desert. It comes with a bespoke wallpaper bundle for
both the lock screen and the home screen, and it has 10 areas you can interact with.
At the top, we have the current outside temperature with a dynamic weather icon that displays
the weather conditions. Tapping on it opens the weather app. Below is my beloved weekly
calendar that shows the weekly day and dates, which is interactive. When taping on it, it
opens the calendar app. Inspired by the pill-shaped Dynamic Island of iPhone 14 Pro, below the
calendar, I've placed a pill-shaped action bar (as I call it). It contains four quick
actions that I most often use. The first one opens the home app. The second creates a new
task in my to-do app, the third plays music, and the last is a very requested shortcut.
It triggers an instant connection to my AirPods. Even if my AirPods are connected to another
Apple device, I instantly bring that connection to my phone thanks to this shortcut. Below
the action bar, I have four app icons that open the app they represent. By the way, I
love how the depth effect turned out this time.
So, let's build it from scratch, and if you end up enjoying this video, subscribe because
WHY NOT?!? Ok, so if you decide to build your interpretation
of this Widget, you can use the same overlapping principles I will show you. Make sure you
use high-res images and transparent PNGs where necessary (like the clouds in the sky). If
you want to build the same Widget, I have here, follow the DIY Namib Widget link in
the description below and purchase the inexpensive materials pack, which has all the bespoke,
hand-drawn, and pre-cut components you'll need. If by any chance, you choose not to
build the Widget, you'll still have two awesome wallpapers to apply to your device. As I mentioned
earlier, if you just want to go ahead and install this Widget as is, without having
to tinker to build it, I also have a Namib Widget Complete pack ready for installation.
It comes with the Widget itself, all the components and wallpapers, as well as a step-by-step
guide. Step number one, place the folder that holds
the widget components in your iPhone files app.
Step number two, save both wallpapers from the folder in your photo gallery, ready to
be applied. Step number three, install the app Widgy Widget
from the App Store. Remember, feel free to pause this video whenever you need to catch
up with the steps. Ok, so let's start simple by applying both
the lock screen and home screen wallpapers. Ensure you position the wallpapers without
stretching or cropping them because they are vital to the overlapping effects we will add
later. If you have a smaller screen iPhone, make
sure the wallpapers are alighned to the top, even if it cuts out the bottom.
Next open Widgy Widget, and from the first tab, select Create and scroll down to choose
a Large Widget. I will quickly go to the third tab, Document, and give this Widget a name
and description. Next, I will go to the primary Manage tab
of Widgy, where I will position my newly created Widget in an empty slot to place on the home
page. I am putting it in Large Slot 2, but you can place it anywhere you like. Next,
I'll go to the home page and add a new widget. From the Widgy options, I will select Large
Slot 2. Going back to the Widget, from the layers
tab, we'll first add a new Image layer. While having nothing in it, I will stretch that
image to take the entire space of the Widget since it will hold a transparent background.
This way, the Widget won't have a black background like any other widget but instead blend in.
By the way, you can choose the steps or increments of the resizing and positioning elements by
toggling between the small, medium, and large steps. Small comes in very handy for some
fine adjustments of the images later. Next, I'll go to the third tab of the image
layer we created and scroll down to Widgy and choose Transparent Background High Quality.
This will lead me to a screen where I need to place a screenshot of the home screen to
simulate the current background we have applied. To create this background, go back to the
home page and place the icons on your home screen in jiggle mode for a moment and swipe
left to an empty home screen. Take a screenshot of this home screen and go back to Widgy to
select it as a background. And just like that, the home screen already looks fantastic. This
is where the fun starts. Before we do anything else, I will rename
my first image layer to Transparent Background. I will urge you to rename all your layers
as you build the Widget accordingly so you can easily manage everything. You'll notice
later that I will rename all my layers as I create them.
The next layer is again an image that will hold my first icon. Once I add the layer,
I'll go to the second tab, Image, and choose System and Files to locate the image I have
prepared for my notes app. Once I choose the image, I'll go to the last tab, Effects, and
add edge rounding to the icon to match it with the rest of the iPhone apps. I find 20%
to be perfect amount of rounding. Then I go back to the first tab, Frame, and resize the
image to 290x290 pixels. Then, I'll position it all the way down and use the small steps
to move it left and right and alight it with the rest of the icons on the iPhone. Note
that you can exit Widgy and go to the home page at any time without having to confirm
the changes inside the app to test how everything looks. This is how I eyeball if my icons are
aligned. Once I am happy with the position of the first
icon, I will duplicate it three more times and align all four icons accordingly. Then,
I'll go to the three duplicated icons and choose the appropriate images from my Files
to represent the icons wanted. Some house cleaning is in order, and I will rename all
layers accordingly. Next, I will add the little overlapping corner
of the dark brown dune to overlap with the Notes app. This image is called Overlay 1,
and it's inside the folder. Positioning this element takes a bit of time to look perfect,
but I am happy with the result a few minutes later. Feel free to take my size and positioning
coordinates from this screenshot. Next, I will create my first Tap Layer. As
you can probably guess, the Tap Layer allows you to tap on an area to trigger an event.
In my case, I want to place four tapping areas for the respective icons and trigger them
to open the apps they represent. Setting tapping areas is very easy. Once positioned and resized,
the tapping area gives you a list of official Apple apps or 3-rd party apps that you can
select from, but remember that not all apps are listed there. If the app you want to open
is not there, you might want to change the app or maybe use a shortcut to open it. This
will happen to me in just a moment as I realize I am not able to trigger the camera app. To
avoid using shortcuts, I will replace the camera app with the YouTube app. Once I test
everything, I will create a new Group layer called Apps. I will place all my app images,
overlay, and tap actions inside for easy management. Next, I will create a new Image layer that
will hold the second overlay of the other dune with the little camels. Fine-tuning the
size of the layer comes a bit later. Before that, I will create yet another layer for
the calendar. Instead of a full calendar, I will go to the
Calendar tab and choose Compact mode, which is essentially the weekly calendar. Then I
will resize it a bit, and from the layers tap, I will place it below my second overlay
dune to simulate the depth effect. Then I'll go to the Calendar tab again and I will change
the font and colors to my initial design. I am using the Antonio font in bold for the
days and the regular width for the dates. Everything is in black with a 20% shadow to
add a bit of depth. Finally, I will change today's symbol color to light grey.
Next is adding the current outside temperature. I will add a new text layer. From the last
Data tab inside the layer, I will choose Weather (Now), and I will select Feels Like Temperature.
Widgy takes that information directly from the weather app. I will position the temperature
closer to the final spot and from the Text tap, I will style the text accordingly. I
ended up using the DIN Condensed Bold font in gradient black with again a 20% shadow.
From the Text tab, you can scroll down to disable the show unit feature, which will
remove the Farenheit or Celcius text. Once I am happy with the positioning and aesthetics
of the temperature, I will add a new Symbol layer to represent the outside conditions.
From the Symbol tab, select Apple SF Symbols and scroll down to find the Weather now symbols.
I will choose the solid fill symbol and give it a solid color by picking the brown from
the sand dune. Then, I'll give it a 20% shadow again and position it slightly over the temperature
text for added depth effect. I will combine all wether layers into a group folder for
maintenance purposes, and with that, we are almost ready with the Widget. Well, almost!
I will need to add tap action layers for both the weather and calendar and lead them to
open the respective apps. Time to create the action layer. For a start,
I will add an image layer that is the black bar. Initially, I made the black bar with
transparent rounded edges. Still, later I figured I could simply use a normal rectangle
and add rounded corners - like we did the icons on the bottom. To do that, you can go
to the Effects tab and give the black bar Edge Rounding of 50%, which is the maximum
in this case. Next, I will create four text layers that
will read the quick actions that I most often use - home, new task, play music, and AirPods.
Nothing complicated here. Simple text, using the Antonio font and proper spacing and positioning.
On top of the 4 text layers, I will place 4 tap action layers for each action. The first
tap action opens the home app. The second tap action triggers a shortcut that creates
a new task in my to-do app, the third triggers a shortcut that plays apple music, and the
last triggers a shortcut to connect my AirPods to the iPhone. I will explain all four shortcuts
in my Sunday newsletter, so make sure you are subscribed to it. I will place the links
for my newsletter up top and in the description below.
To finish the Widget, I will add the last overlay, an image of Clouds that I drew. Add
this image layer and resize and position it to your liking. It should be on the very top
of all the layers. In my case, I stretch it pretty much across the entire Widget. With
that, the Widget is ready, and I think it looks fantastic.
When developing apps or, in this case, this Widget, I often use a systematic exploration
approach, which is a handy problem-solving technique in computer science. Brilliant's
course on Computer Science Fundamentals helps me become a better thinker. A great example
from a recent lesson I took is the city of Königsberg which had seven bridges connecting
two river islands in the city's heart. This arrangement made many wonder if it was possible
to walk across every bridge exactly once (starting anywhere in the city). See, in computer science,
computers can check possible solutions for lots of problems very quickly and don't get
frustrated when the first few million don't work out. If you want to learn the fundamentals
or strengthen your knowledge of core computer science concepts, check out this Brilliant
course and the thousands of other lessons, with exclusive new content that Brilliant
ads monthly. You don't have to spend four years and a fortune to understand this stuff.
To get started for free, visit brilliant.org/thisise or click on the first link in the description
below. The first 200 of you will get 20% off Brilliant's annual premium subscription.
So, there are a few ways you can customize this Widget. First, you can enable and disable
components to your liking. Since we grouped and named all layers responsibly, this takes
just a second. For instance, you can hide the entire action bar, or the calendar, or
the weather portion. If you'd like to change any of the 4 icons,
you have to find the images of your desired icons. I have icon packs on my store, by the
way, or you can simply google them. Make sure they are square and preferably sized 1024x1024
pixels. Then, go to the image Icon of the one you want to swap, get inside and from
the Image tab, go to System, Files and locate the icon you have prepared. Don't forget to
change the Tap Action for that icon. Open the Tap Action you want to change, then open
the Action tab and choose from the list of Apple apps or 3-rd party apps, or even Shortcuts
if you know how to use them. Feel free to tweak the positions of the elements to your
liking. If you are into a more flat look, feel free to hide the overlay layers by just
tapping on the little eye icons beside each layer.
If you enjoyed this video, check out my initial Ultimate iO16 home screen widget, where I
cover more than just the Widget. We talk about organization, widget stacking, and more.
Like and subscribe to the channel as well as my weekly newsletter if you want to learn
how I use my shortcuts, and as always, it's been an absolute pleasure,
This is E Over and out.