When you are designing GUI screens for an application, it can be tricky to get the various components to size and to change in response to different screens (desktop or mobile).
Positioning
Position settings can be:
- absolute, where set the location of a component with in its parent. This can be useful for logos, but remember it prevents the component from flowing with other things on the screen.
- relative, the component is positioned relative to siblings. This allows items to flow or flex as the screen size changes.
| Multimedia | ||
|---|---|---|
|
Fixed
To make a layout component fixed, you can use the options available in the following sections of the layout component properties.
- Position Settings: applies only to this component
- Shared Styles: applies to any component that shares the style
- CSS Properties
For example to fix something to the top left of its parent area, set Top to 0 and Left to 0.
Relative
In this case the parent area properties are influencing how the child objects are positioned on the screen.
To set how components align, use Style Settings → Direction
- Row puts components next to each other until the horizontal space is filled. It will then start a new row.
- Column puts components below each other until the vertical space is filled. it will then start a new column.
For maximum flowyness
Wrap: Wrap
Justify: jFlex Start
Align:Stretch
Using Flex box
| Note |
|---|
Making an object fixed can also change its size because it is affected by the setting |
Position Settings (Object Level)
o Value entered directly into the fields in PhixFlow and get applied to the selected object.
The CSS is constructed using all of these elements each adding and overriding to the elements before it.
Positioning (Video: Positioning)
• Absolute
o the element is positioned absolutely to its parent. This can be thought of as a fixed position as the element will be taken out of the flow.
Example use: positioning a logo.
• Relative
o The element is positioned relative to its normal position and siblings. The design can be thought of as flowing (or flexing).
Example use: applied to elements such as fields that will be used to create a responsive application.
| Multimedia | ||
|---|---|---|
|
...
| Multimedia | ||
|---|---|---|
|
...
| Insert excerpt | ||||||||
|---|---|---|---|---|---|---|---|---|
|
Introduction
When designing screens, start by considering how the content should be laid out. It can be useful to sketch out a design, for example using a wireframe.
| Expand | ||
|---|---|---|
| ||
A wireframe is a visual representation of the layout and structure of your screen or screens. It outlines your basic components, such as areas, tiles, text, images and buttons. |
Think about how the page should respond to its content, e.g. should the page respond to the size of the content and be scrollable, or to the size of screen it is being displayed on? Finally, consider any restrictions required, such as maximum or minimum sizes for components.
| HTML Comment | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||||||||||
|