Introduction to Gravit Designer: Designing a Weather App (Part 1)

Getting Started with Gravit Designer

Gravit Designer has emerged as a powerful free alternative in the vector design landscape, offering professional-grade tools for UI design, icon creation, and screen mockups. This comprehensive tutorial guides designers through creating a complete weather app interface, covering everything from initial setup to polished design elements.

Whether you're transitioning from other design tools like Sketch or Figma, or starting fresh in your web development journey, this guide provides practical knowledge applicable to real-world projects. Gravit Designer stands out for its cross-platform availability, cloud synchronization capabilities, and intuitive interface that balances power with accessibility.

In this first part of our two-part tutorial series, we'll cover the foundational aspects of creating a weather app design: setting up your workspace, configuring the canvas, creating the background, and designing the status bar element. These skills translate directly to professional UI/UX design services where precision and consistency matter.

The Gravit Designer Interface

Understanding the Gravit Designer interface is the foundation for efficient design work. The application divides its workspace into several key areas, each serving a specific purpose in your creative workflow.

The Canvas Area forms the central workspace where you'll spend most of your time. This is where designs are created, edited, and visualized. The canvas can be configured as an infinite workspace for free-form design or organized into discrete artboards for specific screen sizes and device contexts.

The Layers Panel provides hierarchical organization for all design elements. Think of it as the backbone of your project structure, allowing you to group related elements, hide or lock layers, and navigate complex designs with ease. Effective layer management becomes crucial as projects grow in complexity--especially when collaborating with full-stack development teams who need clear specifications.

The Inspector Panel displays and controls the properties of selected elements. From here you can adjust dimensions, colors, strokes, positioning, and numerous other attributes. The Inspector contextually changes based on what's selected, presenting relevant options for each element type.

The Toolbar houses your primary design tools, including selection, shape creation, text, and transformation tools. Learning the keyboard shortcuts for these tools significantly speeds up your workflow.

The 8-Point Grid System

The 8-point grid system has become a standard in UI design for good reason: it creates visual consistency while simplifying decision-making. Instead of calculating arbitrary spacing values, designers work with multiples of 8 pixels, ensuring elements align harmoniously across the interface.

Implementing the 8-Point Grid

In Gravit Designer, enabling the grid is straightforward: access View from the menu and select "Show Grid" or use the keyboard shortcut Alt+Command+G (Alt+Control+G on Windows/Linux). The default grid size can be adjusted in the Inspector panel, where you'll set both width and height values to 8 pixels.

The benefits extend beyond aesthetics. When developers implement designs based on an 8-point grid, CSS values become predictable: padding, margins, and element sizes all translate cleanly to code. This reduces back-and-forth between design and development teams--a key factor in efficient product development cycles.

Key Grid Principles:

• All spacing values should be multiples of 8 (8, 16, 24, 32, 40, etc.)
• Element dimensions should align to the grid
• Components within containers should maintain grid alignment
• Exceptions are acceptable but should be intentional

The grid snaps functionality in Gravit Designer helps maintain alignment as you position elements, though you can disable snapping when working on detailed icon work or precise decorative elements.

Creating the Weather App Background

The background sets the visual tone for your entire weather app design. For weather applications, atmospheric backgrounds that communicate current conditions create immediate visual engagement. In our design, we'll create a rainy evening atmosphere using a carefully selected background image.

Image Integration Workflow

Begin by selecting an appropriate background image. For a weather app conveying rainy conditions, choose imagery with moody tones and appropriate color palettes. You can source images from stock libraries or use your own photography.

Importing Images:

Gravit Designer supports multiple image import methods:

• Drag and drop from your file manager directly onto the canvas
• Copy from a web browser and paste directly into your design
• Use File > Import to browse for image files on your system

Once imported, position the image using smart guides for perfect centering. Select the image with the Pointer tool (V), then right-click and choose Align > Align Center followed by Align Middle. Alternatively, watch for pink smart guides as you drag the image into position.

Resizing and Clipping

To create visual impact, the background should extend beyond the artboard boundaries. Select your image, hold Shift to constrain proportions, and hold Alt to resize from the center. Drag the corner handles until the image comfortably overflows all edges.

To clip the overflow and create clean edges, switch to Output View through View > View Mode > Output view. This mode shows exactly how your design will appear within the artboard boundaries, with overflow content hidden.

Note: While enlarging bitmap images is generally not recommended for final production work, it works well here because the image will be blurred in the final design. Blurring softens any pixelation that might result from enlargement.

Designing the Status Bar

The status bar occupies the top 24 pixels of your app screen, providing essential device information like time, battery level, and connectivity status. In our weather app design, we'll create a clean white status bar that contrasts effectively against our darker background.

Creating Status Bar Elements

The Rectangle tool (R) is your primary tool for this task. Click and drag from the top-left corner of your artboard to create a rectangle spanning the full width. In the Inspector panel, set the height to exactly 24 pixels to match the 8-point grid system.

Setting the Color:

With the rectangle selected, locate the Fill property in the Inspector. Click the color field to open the color dialog. For our status bar, select white (or drag the color picker to the top-left corner where white resides). You can also select white directly from the swatches panel in the bottom-right of the dialog.

Organizing with Groups

As you add more elements to your design, organizing them into logical groups becomes essential. The status bar elements should be grouped together and named appropriately. Select the status bar rectangle, then press Command+G (Control+G on Windows) to create a group. Double-click the group name in the Layers panel to rename it to "Status bar."

Groups allow you to:

• Move multiple related elements as a single unit
• Lock elements to prevent accidental changes
• Hide entire sections of your design for focused editing
• Maintain clean, manageable layer structures

Group Naming Conventions

Consistent naming conventions save time as projects grow. Consider a hierarchical approach:

• Top-level: Major sections (Status bar, Header, Content, Footer)
• Nested levels: Specific elements (Time, Signal, Battery)

This structure makes finding and modifying elements intuitive, especially when collaborating with other designers on enterprise application projects.