Wireframes: Difference between revisions
No edit summary Tag: visualeditor |
|||
| (22 intermediate revisions by 2 users not shown) | |||
| Line 3: | Line 3: | ||
Programm: [[Sketch]] | Programm: [[Sketch]] | ||
=Coworking w/ Abstract= | |||
===Create Projects:=== | |||
1. Open [App] "Abstract" | |||
2. Click [CTA] "New Project" | |||
Name: {Projectnumber} | |||
Description: {What is the project about?} | |||
Color: {CD-Color of the client} | |||
3. Click [CTA] "Create Project" | |||
4. Click [CTA] "Create Sketch File" | |||
File name: {Projectnumber}_Wireframes | |||
Use as Library: no | |||
5. Click [CTA] "Create Sketch File" | |||
6. Click [Dropdwon] "Add File" | |||
7. Click [List-Item] "Create Sketch File" | |||
File name: {Projectnumber}_Symbols | |||
Use as Library: yes | |||
8. Click [File] "{Projectnumber}_Wireframes" | |||
9. Click [CTA] "Edit File in Sketch" | |||
10. Click [File] "{Projectnumber}_Symbols" | |||
11. Click [CTA] "Edit File in Sketch" | |||
===Every night for every Wireframe you worked on:=== | |||
1. Click [CTA] "Commit Changes" | |||
2. Summarize your changes... | |||
3. Click [CTA] "Commit Changes" | |||
=Basics= | =Basics= | ||
[[File:Layout Desktop.png|thumb|Desktop]] | |||
[[File:Layout Tablet.png|thumb|Tablet]] | |||
===Layout Settings=== | ===Layout Settings=== | ||
{| | {| | ||
! style="text-align:left;"| Device: | ! style="text-align:left;" |Device: | ||
!style="text-align:left;"|Desktop | ! style="text-align:left;" |Desktop | ||
!style="text-align:left;"|Tablet | ! style="text-align:left;" |Tablet | ||
!style="text-align:left;"|Cell | ! style="text-align:left;" |Cell | ||
|- | |- | ||
|Artboard Width: | |Artboard Width: | ||
| Line 19: | Line 64: | ||
|- | |- | ||
|Columns: | |Columns: | ||
|yes | |yes | ||
|yes | |yes | ||
|yes | |yes | ||
|- | |- | ||
|Total Width: | |Total Width: | ||
| | |1280px | ||
| | |648px | ||
| | |355px | ||
|- | |- | ||
|Offset: | |Offset: | ||
| | |80px | ||
| | |60px | ||
| | |10px | ||
|- | |- | ||
|Number of Colums: | |Number of Colums: | ||
| | |24 | ||
| | |12 | ||
| | |12 | ||
|- | |- | ||
|Gutter on outside: | |Gutter on outside: | ||
|no | |no | ||
|no | |no | ||
|no | |no | ||
|- | |- | ||
|Gutter Width: | |Gutter Width: | ||
| | |16px | ||
| | |12px | ||
| | |5px | ||
|- | |- | ||
|Column Width: | |Column Width: | ||
| | |38px | ||
| | |43px | ||
| | |25px | ||
|- | |- | ||
|Rows: | |Rows: | ||
|yes | |yes | ||
|yes | |yes | ||
|yes | |yes | ||
|- | |- | ||
|Gutter Height: | |Gutter Height: | ||
| | |8px | ||
| | |8px | ||
| | |8px | ||
|- | |- | ||
|Row Height: | |Row Height: | ||
| Line 85: | Line 130: | ||
Tipp: If you click the CTA [Make Default], the program makes these characteristics permanent, until overwritten. | Tipp: If you click the CTA [Make Default], the program makes these characteristics permanent, until overwritten. | ||
[[File:Layout Cell.png|thumb|Cell]] | |||
https://drive.google.com/open?id=1uV-ROxfxwyTunczeOgAHYF4VP7Si0nphqE_CphHLY3w | |||
Latest revision as of 13:58, 19 June 2019
Hier ist die Seite Wireframes!
Programm: Sketch
Coworking w/ Abstract
[edit]Create Projects:
[edit]1. Open [App] "Abstract"
2. Click [CTA] "New Project"
Name: {Projectnumber}
Description: {What is the project about?}
Color: {CD-Color of the client}
3. Click [CTA] "Create Project"
4. Click [CTA] "Create Sketch File"
File name: {Projectnumber}_Wireframes
Use as Library: no
5. Click [CTA] "Create Sketch File"
6. Click [Dropdwon] "Add File"
7. Click [List-Item] "Create Sketch File"
File name: {Projectnumber}_Symbols
Use as Library: yes
8. Click [File] "{Projectnumber}_Wireframes"
9. Click [CTA] "Edit File in Sketch"
10. Click [File] "{Projectnumber}_Symbols"
11. Click [CTA] "Edit File in Sketch"
Every night for every Wireframe you worked on:
[edit]1. Click [CTA] "Commit Changes"
2. Summarize your changes...
3. Click [CTA] "Commit Changes"
Basics
[edit]
Layout Settings
[edit]| Device: | Desktop | Tablet | Cell |
|---|---|---|---|
| Artboard Width: | 1440px | 768px | 375px |
| Columns: | yes | yes | yes |
| Total Width: | 1280px | 648px | 355px |
| Offset: | 80px | 60px | 10px |
| Number of Colums: | 24 | 12 | 12 |
| Gutter on outside: | no | no | no |
| Gutter Width: | 16px | 12px | 5px |
| Column Width: | 38px | 43px | 25px |
| Rows: | yes | yes | yes |
| Gutter Height: | 8px | 8px | 8px |
| Row Height: | 1 x Gutter Height | 1 x Gutter Height | 1 x Gutter Height |
| Draw all horizontal lines: | yes | yes | yes |
| Visuals: | Stroke Outline | Stroke Outline | Stroke Outline |
| Colors: | Dark (), Light () | Dark (), Light () | Dark (), Light () |
Tipp: If you click the CTA [Make Default], the program makes these characteristics permanent, until overwritten.
https://drive.google.com/open?id=1uV-ROxfxwyTunczeOgAHYF4VP7Si0nphqE_CphHLY3w