UI/UX Development Basics with Figma 03: Mobile Landing Page

Mobile landing pages are the welcoming faces of apps, so they need to be both beautiful and functional.

UI/UX Development Basics with Figma 03: Mobile Landing Page

Today, we're stepping into the world of mobile landing pages. These are the welcoming faces of apps, so they need to be both beautiful and functional.

Essentials of Mobile UX

  1. Touch Targets: In mobile design, touch targets are crucial. These are the areas on the screen that users interact with, like buttons and links. They should be large enough (at least 44x44 pixels) to tap easily without zooming or making errors. Think about the comfort of tapping with a thumb or finger – it's all about creating a smooth user experience.
  2. Minimalism: A cluttered screen can be overwhelming. Embrace minimalism by focusing on essential elements only. This doesn't mean your design should be bare, but rather, every element should have a purpose. Use space smartly to guide users' eyes to key areas without distractions.
  3. Readability: On small screens, readability is paramount. Use clear, legible fonts and ensure there is enough contrast between text and background. Text size should be large enough to read without zooming, but not so large that it takes over the screen. Aim for a harmonious balance that eases the reading experience.

Today’s Mission: Design a Personal Mobile Landing Page in Figma

Step 1: Choosing Your Mobile Template

Start Figma and create a new file. Under the 'Frame Tool', select a mobile device preset that fits your vision.

Selecting the Frame Tool
From the properties panel, select any mobile device you'd like.

Step 2: Understanding and Implementing Layout Grids

Layout grids are your secret weapon for organized, consistent designs. They provide a structural base, helping you align elements harmoniously. Think of it as the underlying skeleton of your design.

In Figma, activate a grid under 'Layout Grids'. Experiment with columns and gutters. Columns provide vertical alignment guides, while gutters (the space between columns) ensure elements have breathing room.

Why are grids important? They bring order to your design and make it visually digestible. Grids help maintain balance and proportion, key factors in a pleasing aesthetic and functional design.

Implementing and adjusting a layout grid

Step 3: Designing Your Landing Page Elements

Create an Engaging Header: Start by adding a header at the top of your page. This could be the name of your app or a catchy slogan that resonates with your target audience. Use a font that's bold and readable. Play with size and color, but remember, it should be legible and not overpowering.

Header complete. Notice that each asset in the design becomes a layer in the layers panel. You can use the layers panel to manipulate and organize elements in your design. The curved line was drawn with the pen tool.

Incorporate a Compelling Graphic or Image: Choose an image or graphic that captures the essence of your app. It could be a hero image, an illustration, or a subtle background pattern. Make sure it complements your header text and doesn't distract from it. In Figma, you can import images directly or use shapes and tools to create custom graphics.

To create this effect the curve layer was duplicated. The new layer was filled with a photo and set at 30% opacity.

Apply Minimalism and Readability: As you add these elements, constantly ask yourself: Is this necessary? Does it enhance the user's understanding? Aim for a clean and uncluttered look. Use colors and fonts that are easy on the eyes. A good rule of thumb is to stick to a maximum of two fonts – one for the header and another for any other text.

Step 4: Adding Interactive Elements

Place Your Custom Buttons: Now, let's use the buttons you designed earlier. Place a primary button like 'Sign Up' or 'Learn More' in a prominent spot. This button should be the most noticeable interactive element on the page. Ensure it aligns with your grid lines for a neat layout.

Ensure Optimal Size and Spacing: Buttons should be easily tappable, so aim for a size that's comfortable for a finger to tap without accidentally hitting other elements. A general guideline is to have a button height of around 44-48 pixels. Use your grid to maintain consistent spacing around the button, ensuring it's not too close to other elements.

Add Secondary Interactive Elements: If your page needs additional interactive elements like 'Contact Us' or 'View Features', add them in a way that they are secondary to your primary button. They should be easily accessible but not competing for attention. Use a different style or a more subdued color to differentiate these from your primary button.

Check for Functionality and Flow: Step back and review your page. Do the interactive elements guide the user naturally? Is there a clear visual hierarchy? The user should be drawn to the most important action you want them to take.

Creating buttons. I changed the overlay to blue here so the buttons contrast better with the background.

Step 5: Finalizing Your Design

Experiment with different styles. Keep user friendliness at the forefront of your design choices. Ensure your final design feels intuitive and welcoming.

Step 6: Sharing Your Work

Showcase your landing page design on our ​SkillSprints Slack channel​. We're excited to see your creative interpretation!

Need Help? If you have any questions or hit a snag, our Slack community is here to assist!

Your Key Takeaway Today, you've crafted more than just a landing page; you've created an inviting entry point into a digital world, guided by solid mobile UX principles.

Final Thought Excellent work! You're not just learning tools; you're mastering the art of user-centric design. Tomorrow, we dive deeper, so stay tuned!