Icons, Typography, and Styles

Dark Mode

Dark Mode has become increasingly popular among users for its sleek appearance and the benefits it offers, such as reduced eye strain in low-light conditions and potentially saving battery life on OLED and AMOLED screens. For a smart home app, incorporating dark mode is not just about following trends; it's about providing a user-centric experience that respects user preferences and environments.

• Contrast and Readability: Ensure your text and UI elements stand out against the dark background without causing glare. A subtle contrast, rather than a harsh one, often works best.
• Color Usage: In dark mode, your color palette needs to adapt. Use desaturated colors to avoid vibrancy overload, which can be jarring against dark backgrounds. Accent colors should be used sparingly and thoughtfully to highlight important information or actions.
• Backgrounds: Choose a deep, dark color for your app’s background. Pure black (#000000) can create a stark contrast, which might be too intense for some users, so consider using a slightly lighter shade of black or dark gray such as (#080B1C).
• Embracing Shadows and Depth: Proper use of shadows can help create a sense of depth and hierarchy in your app. In dark mode, lighter elements can float above darker backgrounds, so adjust shadow properties accordingly to maintain visual consistency.

Typography

Typography in app design is not just about choosing pretty fonts; it's about readability, accessibility, and setting the tone for your smart home app. Effective typography guides users seamlessly through their in-app journey, making interactions feel intuitive and effortless.

• Font Choices: Opt for legible fonts that work well in various weights. San-serif fonts are generally preferred for digital screens due to their readability. Also, SF Pro is an excellent choice for iOS applications. It's designed specifically for Apple platforms, offering a range of weights and styles that ensure text is easy to read and looks great at any size.
• Hierarchy and Layout: Use font sizes, weights, and colors to establish a clear hierarchy. Headlines, body text, and captions should be distinctly different, guiding the user’s attention naturally.
• Responsive Typography: Ensure your typography adapts to different screen sizes and orientations. Dynamic Type on iOS allows users to adjust font sizes based on their preferences, so your app design must be flexible to accommodate this.

SF Pro Font

We're going to use SF Pro, Apple's official font for iOS, macOS, and tvOS. Designed for clarity and readability on all devices, it offers various weights and styles, such as Bold and Light, making it suitable for both text and user interface design. SF Pro supports multiple languages and is optimized for screen and print, available for designers to ensure a consistent look in apps and websites that aligns with Apple's style.

Icons

Icons are more than just decorative elements; they're tools of communication that transcend language barriers. In a smart home app, icons help users quickly identify functions and controls, making the user experience more intuitive and efficient.

SF Symbols 5

We will use icons from SF Symbols 5, the system font for Apple platforms. With over 5,000 icons, we can find anything we want. Symbols come in nine weights and three scales and automatically align with text. They can be exported and edited using vector graphics editing tools to create custom symbols with shared design characteristics and accessibility features. SF Symbols 5 introduces a collection of expressive animations, over 700 new symbols, and enhanced tools for custom symbols.

Temperature Control

We've finished with the thermostat. This is the most complex and time-consuming part of our design. Now, we're going to design the temperature control for our thermostat app. This part lets users easily change the temperature with simple plus and minus buttons. We'll make sure the buttons are easy to use and show changes right away, so users can quickly set the temperature they want.

Placing Plus and Minus Icons

• Locate the temperature control area at the bottom of your thermostat design.
• Place the plus and minus icons on polygon shapes, ensuring they are centered.

Filling and Outlining Polygons

• Fill the polygon with a white linear gradient to create visual depth.
• Place one end of the gradient opposite the polygon's edge and set its opacity to 0% for a seamless blend with the background.
• Keep the other end of the gradient at 100% opacity to ensure a clear definition.
• Adjust the polygon's opacity to 10% for a subtle effect that enhances the overall design without overpowering it.
• Add stroke to the polygon and apply the same white linear gradient as used for the fill.
• Set the stroke's opacity to 60% to enhance its visibility against the background.
• Use the overlay blend mode for the stroke to ensure it blends smoothly with the dark background, avoiding harsh lines.
• Repeat the process for the other polygon.

Adding Text

• Press "T" to use the text tool. Type "20 degrees Celsius". Choose the "Title, Emphasized" style with SF Pro Bold and a font size of 28. This is the main temperature display.
• Duplicate the temperature text. Change its style to "Footnote/Regular", reduce the opacity to 60%, and update the text to "10°".
• Make two more duplicates, changing the text to "20°" and "30°". Place these duplicates at the top, left, and right of the main temperature, aligning them neatly.

Gradient Button

We're designing a sleek "Thermostat Schedule" button for our interface, essential for easy access to scheduling features. This button streamlines interaction, enabling users to effortlessly manage temperature schedules, enhancing usability and satisfaction. Its presence ensures efficient customization, contributing to a seamless experience within the app.

Add Text and Auto Layout

• Press T on your keyboard to select the Text tool.
• Click on your canvas to start typing and enter "Thermostat Schedule" as your text.
• Apply the Body/Emphasized style from the Apple UI kits.
• With your text selected, press Shift+A to add Auto Layout to your text frame.
• Resize the frame to 390px in width and 44px in height to ensure it has sufficient space around the text for visual appeal and interaction.

Add Linear Gradient

• Select the frame you've just adjusted and fill it with a linear gradient. Make sure the gradient is applied vertically.

• Add three color stops to your gradient:

  • First stop: Color code #00D7FF.
  • Second stop: Color code #026DFF.
  • Third (last) stop: Color code #090F26.
• Position the last color stop (the dark color) below your text, aligning it with the baseline of your text. Set its opacity to 70% to create a subtle overlay effect.
• For the frame containing your text and gradient, round the corners to 30px.

Incorporate Rectangle Element

• Select the rectangle from the wireframe and place it inside the button layout.
• Activate the absolute position for the rectangle to override the auto-layout flow, ensuring it doesn't disrupt your design.
• Center the rectangle within the parent layout to maintain symmetry.
• Fill the rectangle with white color and reduce its opacity to 30% to blend it subtly with the background use Overlay.
• Add a stroke with a linear gradient of white to enhance its visibility and aesthetic appeal. Set the stroke type to overlay.
• Finally, add a background blur of 20 to the rectangle. This will make it blend more seamlessly with the button's background, giving it a sophisticated, frosted look.

Navigation Bar

We'll continue where we left off and create our navigation bar generally used for navigation, it allows users to move from one view to another or from one state of the application to another. We'll need icons for "mode, humidity, fan and timer".

• Choosing Icons: We need icons for "mode", "humidity", "fan", and "timer".
• Icon Size: Adjust each icon to be 24 pixels in size for clarity.
• Placing Icons: Position each icon inside a square frame that measures 44 pixels on each side, ensuring the icons are easily clickable.

Utilize Predefined Text Styles

Text Styles are predefined sets of attributes for text, like font, size, and color. They ensure consistency across designs, save time by allowing quick application to text layers, and can be updated globally. They help keep typography organized and consistent throughout projects.

• Adding Text Labels: Use the Text tool (shortcut ‘T’) to add a label under each icon, starting with “Mode.”
• Text Style: Change the text to “Callout/Regular” style, and make it white.
• Text Visibility: Set the text opacity to 60% to make the icons stand out more.
• Applying Auto Layout: Select the icon and the texr. Use auto layout on these groups to manage their arrangement.

• Auto Layout Settings:

  • Adjust the width of the auto layout frame to 82 pixels to fit both the icon and label.
  • Set a 4px gap between the icon and label.
  • Add 20px padding at the top and bottom, with 10px padding on the sides.
  • Apply a 16px corner radius for a soft, rounded look.

Styling the Group

• Coloring the Group: Apply a background color named "container 2" to the group.
• Adding an Edge: Outline the group with a stroke called "outline container 2" for a distinct edge.
• Copying for Other Icons: Copy the group you made for the "Mode" icon.
• Adapting for Other Categories: Replace the icon and label in each copied group to match the "Humidity," "Fan," and "Timer" categories, respectively.

Top Navigation Bar

We need a top navigation bar in our app. It's crucial for guiding users through the app and giving them easy access to actions and features they need. Instead of starting from scratch, use the pre-designed icons. For the back navigation, use a chevron icon, and for thermostat settings, use a gear icon. On the third page, add a chevron for navigation and a bell for notifications. For the first page, we'll use the navigation bar from my assets page.

Status Dashboard Card

We're going to create the Status Dashboard Card. The card essentially helps the user to quickly understand the current weather conditions both inside and outside, as well as the battery level of a relevant device, all of which could influence decisions such as adjusting the heating or charging the device. We’re going to play with icons and different text sizes. We'll also experiment with typeface weights, such as bold and regular.

Outdoor Temperature Card

• Start with a sun-snow icon, resizing it to 24.
• Type the temperature next to the icon using the Title 2/Emphasized style.
• Below the temperature, add the word "Outdoor" using the Callout style in regular weight.
• Group the temperature and "Outdoor" text, applying Auto Layout.
• Combine this text group with the icon in another Auto Layout, setting both horizontal and vertical padding to 20.
• Duplicate the container.

Creating a Separator

• Use the line tool to draw a separator. Fill it with a white linear gradient, including three stops. Make the ends transparent (0% opacity) and the middle fully opaque.
• Blend the separator with the background using the overlay setting. using the overlay setting.

Finalizing the Layout

• Select the two containers, and the separator, add auto layout. Center-align the layout.
• Duplicate it for another set of information and group these layouts using Auto Layout, with a gap of 0.
• Adjust the parent container to 390 in width. Ensure the child containers resize to 'Fill container.'
• Label your layers appropriately for clarity.
• Duplicate the layout for additional data.
• Combine the duplicated layouts into one Auto Layout, setting the gap to 0.
• Ensure separators are set to 'Fill container' for uniform appearance.
• Apply the Container 2 style for background fill and Outline Container 2 style for the border. Round the corners to 20 for a sleek look.
• If a separator is missing, copy one, rotate it to 0, and integrate it into the layout, setting its size to 'Fill container.'

Current Energy Usage Card

Now, let's go to the Smart Home Dashboard, we're going to create the Current Energy Usage Card.

• Title: Press "T" to add "Current Energy Usage" as the title. Style it with Body/Emphasized.
• Timestamp: Add "9:41 AM" next to the title on the right, using footnote/regular style.

Energy Usage Display:

• Show "2.1 kW" in the center, using Title 1/Emphasized and blue color (59B4F7).
• Add a description below: "Your home's power draw at this moment." Use body/regular style, white color, and 60% opacity.

Supplementary Data:

• Place an energy icon near "24-Hr Usage" in callout/regular and show "48 kWh" next to it in Title 2/Emphasized.
• Add a cost icon with "$5.20 Estimated Cost" next to it.

Organize with Auto Layout:

• Use Auto Layout for the title and timestamp, aligning them left
• Also apply Auto Layout to the icon and text pairs, setting an 8px gap.
• Duplicate as needed for other data.
• Use a separator from the Status Dashboard Card if needed.
• Group all related items (like energy usage and its description) in Auto Layout, maintaining an 8px spacing.

Style Adjustments:

• Remove any extra rectangles.
• Apply a fading gradient from the top for background styling.

Conclusion

In conclusion, through this tutorial, we've learned to enhance our smart home app by adding clear icons for easy navigation and using consistent text styles for readability. We focused on making the interface more user-friendly with temperature control icons, a "Thermostat Schedule" button, and a detailed dashboard for current energy usage. By experimenting with typography, like SF Pro for iOS, and design elements like gradients and auto layout, we've made our app not only functional but also visually appealing. This process showed us how small design details can significantly improve the user experience.