UI & WEB DESIGN USING ADOBE ILLUSTRATOR CC

SET UP WORKSPACE
1. Workspace : WEB (Reset Web)
2. Change Preferences to “PIXELS” (Units), because nothing else works well online.

CREATE A SITEMAP
1. Sitemap is like a flowchart of WEB / UI
2. Draw by hand or use AI (This is if we’re going to present it to the client).
3. AI : Use Rectangle Tool (No Fill, Black Stroke)
4. HOME – PRODUCTS (PRODUCT 1) (PRODUCT 2) – CONTACT US

SET UP SCREEN SIZE

1. FILE >> NEW >> WEB (1200w x 768h) >>> CREATE [height depends on the contents)
2. Use ARTBOARD TOOL to create artboards for tablet and mobile
3. Refer to mydevice.io for smartphone size and integration

GRID SYSTEM & RESPONSIVE MOBILE & TABLET DESIGN

1. 12-Column Grid (Desktop)
2. 6-Column Grid (Tablet)
3. 2-Column Grid (Mobile)
4. This is very IMPORTANT. Only use EVEN NUMBERS for creating grids.

SET UP A 12-COLUMN GRID IN AI

1. Adjust the artboard >>> RECTANGLE TOOL (cover up the whole artboard) >>> OBJECT
>>> PATH >>> SPLIT INTO GRID (Columns : 12 / Gutter : 30 px / Tick Add Guides)
2. Adjust the guides. Pull it downwards because the length depends on the contents.
3. Select lines >>> VIEW >>> GUIDES >>> MAKE GUIDES
4. Adjust the artboards for playroom space.
5. Tablet (Columns : 6 / Gutter : 30 px / Tick Add Guides)
6. Mobile (Columns : 2 / Gutter : 30 px / Tick Add Guides)

CREATE A WIREFRAME (LOW FIDELITY – HAND DRAWN) (HIGH FIDELITY – AI)

1. Low Fidelity (Hand Drawn – Notebooks, Write down ideas) Make up to 5 layouts – it gets
better.
2. High Fidelity (AI) – Gray boxes and some texts. Page furniture.
3. Column to Column – never ever cross or stop at the GUTTER.
4. Shortcut keys (SHIFT + MOVE ARROW) moves in big chunks
5. Shortcut keys (CTRL + SHIFT + FULL STOP) – Increases text size.
6. Shortcut keys (CTRL + SHIFT + COMMA) – Decrease text size.
INSPIRATION FOR WEB DESIGN – STARTING UP WEB DESIGN PROJECT
1. www.awwwards.com / behance
2. Color.adobe.com (Color Themes / Combinations)
3. Use the right web fonts (USE GOOGLE FONTS) – Use 2 or 3 fonts only. A lot more would
look terrible.
4. Royalty Images.

ADDING, LINKING, CROPPING, & MASKING IMAGES

1. Use FILE >>> PLACE (Images) Instead of “Open img + Drag”
2. Shortcut key (CTRL + 7) makes clipping mask

WASHING OUT IMAGES IN AI WITH COLOURED BACKGROUND

1. Place Image, EDIT >>> EDIT COLORS >>> CONVERT TO GRAYSCALE (If cannot change to
grayscale, click “EMBED”)
2. Play with color and opacity.

TABLET & MOBILE VERSIONS

1. Simply Copy + Paste + Adjust Accordingly

EXPORT FULL PAGE WEB UI MOCKUPS

1. Put them into .PDF file for the client to see, or for the web developer to give a costing
on.
2. Export the screens with the artboards.
3. FILE >>> EXPORT FOR SCREENS (artboard / format : PDF) >>> EXPORT ARTBOARDS

EXPORTING IMAGES AND PICTURES

1. Don’t have to export all templates, just one (DESKTOP), because it will be scaled. Import
ONE FILE, and pick the LARGEST.
a. HERO IMAGE (Desktop)
b. PHOTO THUMBNAILS (Mobile)
2. Open ASSET PANEL (WINDOWS >>> ASSET EXPORT)
3. Click “Hero Images” (including the layers on it) >>> Drag them into the ASSET PANEL >>>
Rename it (use hyphens instead of space. Eg: hero-image) >>> Format (JPG 50 / Suffix
-50 or NONE) >>> Export Image (make sure all is selected first)
a. The higher the JPG & Suffix, the more beautiful.
b. Only use .PNG if it has transparent background – but the file size will be larger.

EXPORTING LOGOS AND ICONS

1. Similar process (Format : SVG)
2. Select image / vector >>> Add Selected (in panel, bottom) instead of dragging them.
3. Make sure everything is ungrouped first.
RETINA – HIDPI AND RESPONSIVE IMAGE EXPORT
1. High-Res Images (Scale 1.5x / 2x) (Suffix: None) (JPG 50)
2. Proper Way (Scale 2x) (Suffix: x2) (JPG 50) >>> Double the resolution, file will be large.
3. People usually export TWO versions.

EXPORTING UI FOR APP DESIGN

1. ASSET PANEL >>> Choose IOS
a. Scale (1x/2x/3x) Suffix (None/@2x/@3x) (PNG)
b. Scale (None) Suffix (None) (SVG) = Total would be 4 files

2. ASSET PANEL >>> Choose ANDROID

a. Scale (0.75x/1x/1.5x/2x/3x/4x)
b. Suffix (ldpi/mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi)
c. PNG = Total would be 7 files

EXPORTING CSS FOR DEVELOPERS

1. Select the heading (text, because it’s the biggest and easiest) >>> WINDOW >>> CSS
PROPERTIES (a panel would open)
2. Copy + Save Info into Text Document (for developer’s use) – change heading/tag name
a. Desktop / tablet / mobile
3. BUTTONS (to click) – (have to change its name first: LAYERS >>> SUBLAYER) Eg: click-me
4. Another method : CSS PROPERTIES PANEL (bottom left) >>> EXPORT OPTIONS >>> TICK
Generate CSS for Unnamed Objects >>> TICK Include Dimension

LEARNING THE LANGUAGE OF UI USER INTERACTION DESIGN

1. Design.google.com (well curated / great articles / good resources) – borrowed
experience.
2. Material.io
3. Facebook.design

ADVICE
1. Take any job. Build that portfolio.
2. Give it 1 – 2 years, you’ll be great at it.

CHEAT SHEET
1. Before exporting to .PNG, go to VIEW >>> PIXEL PREVIEW >>> SELECT ITEM >>> RIGHT
CLICK >>> MAKE PIXEL PERFECT
2. Change PREFERENCES to “PIXEL” before starting any UI Project because nothing else
works ONLINE.
3. “PACKAGE” has CSS Functions.