Day 1: Fluent Lock Screen
Today is day one of my 30 Fluent Designs in 30 Days Challenge, what better way to start this challenge than to start with the Windows 10 Lock Screen. The lock screen is seen by everyone and for a seemingly “simple” page, there is quite a lot to consider when designing it.
A warning before we start, I have done zero user research, I do not know the full requirements needed for people of various regions, languages, accessibility or secondary devices. This is purely a visual experiment of a design that would be more “artistic”.
First, let’s take a look at the new design then I’ll talk more about it below…
What good is a re-design if you have nothing to compare it to, check out this image to refresh you mind on what the default Windows 10 Lock Screen looks like…
This is actually a pretty boring default design (probably by design), here are some of the issues I have with it though.
- It’s very dark, I’m surprised Microsoft used such a dark image to “Welcome” people into Windows, it really is not inviting.
- It has a strong “corporate” feeling with the hard shapes and blue coloring.
- Why does Microsoft have to push the Windows logo so hard? I assume for recognition, but I think a more generic, warm photo would be far more interesting to people.
Here are some of the things I focused on for my concept design.
- People are familiar with having a “Taskbar” at the bottom of the screen when they use Windows, so I decided that instead of having each account be stacked on top of each other down the left side, I would put them next to each other on the bottom of the screen. This could potentially be an issue if there are a whole bunch of accounts on one device, but I’d imagine that is an edge case.
- I applied a simple Acrylic background style behind the footer to separate it from the background. This could potentially be “Darker” or “Lighter” to draw more or less attention to it if needed.
- On the far right, are you standard action buttons.
- The default background has been changed to a User defined one that fits their interests. (Something that can be done now in Windows 10)
- I wanted the User’s Accent Color to be very prominent so that the page would feel personalized and quickly obvious that it’s your account.
- The “Selected” account in the footer bar would apply the accent color as the active state, we also include a bold border and accent colored drop shadow. The thick border helps match it up with Xbox style a bit. You can see what a second user might look like below…
7. I like having a large profile picture in the middle of the screen, people chose their pictures for a reason so why not show them off as large as possible while not getting carried away.
8. The border around the photo would be their accent color and carried through to the drop shadow as well.
9. I wanted to pull the “Content” off the page from the background so I applied some Acrylic to a rounded shape to help provide focus. I like repeating the circular shapes, it helps tie the image and the content together while also feeling a bit more organic on the page.
10. I don’t have a whole lot more to say about the design, I think it’s pretty self explanatory. As I mentioned above, there are likely a lot of UX related issues with the design, but it’s at least fun to look at!
Ohh, forgot to write about animations…
- I don’t have time to create animations for it at this point however, you could do some interesting things.
- You could animate the accent color from one person to the next on selection.
- Profile image could have some slight title or zoom effects on hover or automatically.
- Content area could “Slide” out from behind profile image on page load.
- When you click to login, you could do some motion with the profile image moving down towards the start button to give some directional focus.
- Lots of potential ideas.
Hiccups
As I was working on this design, I did run into some issues with Adobe XD that I wasn’t sure how to work around as I’m diving into it. For instance…
- For some reason you can’t apply a drop shadow to a shape and remove the shapes fill color, if you do then the drop shadow disappears. You can’t even set the fill to 0% opacity, it still disappears.
- On Acrylic styled shapes, if you apply a drop shadow, it seems to affect the fill color as well, which doesn’t make a lot of sense to me.
- It’s super frustrating that you can’t select two layers if the layers are grouped in different groups. For example, I want to align two images, I have to put both images in the same group, align them, then move the second image back out. Tedious
- Whenever you paste an image or a shape onto a canvas, it puts it at the top of the layer list no matter what. This is a pain as I’m used to it pasting above the currently selected layer. Clicking and dragging a layer is a bit flakey at times.
- Exporting size, for being a “Vector” based tool, I find it odd I can only export to 1x and 2x sizes, the default templates are quite small when you actually export them to say a jpg or png. I ended up doubling the canvas size and all my design elements to get a decent file to export.
- Property Text Values, I’m used to double clicking a property value in Photoshop to select the value, however in XD if you double click you actually “Select” it on the first click and “Deselect” it on the second click. I need to get used to single clicking.
- The other Property value issue I had, was if I tried to click and drag to select the text value, what happens though is after you drag past the control bounds it loses focus and doesn’t select the value.
So that is a wrap for Day 1, I wanted to started off fairly simple to get a grasp of Adobe XD. I’m a bit concerned though, it took me much longer to create this design than I would have expected. One day per design may not be enough, especially if I have real work to do.
Source Adobe XD File: Download (.zip)
Thanks for following along, leave your feedback and suggestions.
Micah
Background Images From: https://unsplash.com/
