Web Designer Responsibilities:
Execute all visual design stages from concept to development
Conceptualize original website design ideas that bring simplicity and user friendliness to the user
Create wire frames, storyboards, user flows, process flows and sitemaps to communicate interaction and design ideas
Establish and promote website development guidelines, best practices and standards.
Website Development checklist.
Plugin to Install:
Plugin Name | Remarks |
W3 Total Cache | |
Wordfence | |
Smush | |
Insert header and footer | |
Yoast SEO | On actual domain |
Setup Google Analytics | On actual domain |
Setup Google Search Console | On actual domain |
Setup Recaptha V3 | On actual domain |
Before 1st review Standard Operating Procedure:
Item | Remarks | Tools |
Upload favicon |
| |
Insert website tagline | Go to settings > general > tagline
| |
Create 404 page |
| |
Check on mobile / tablet / desktop view | Screensize: 320px 375px 414px 768px 1024px 1280px 1440px 1920px | Tools to use: http://responsivetesttool.com/ |
Check browser compatibility | IE Firefox | |
Add heading to main page slider | ||
Link out all buttons and link | ||
Social Media Integration | Youtube | |
Make sure Google Map address is correct | Embed from Google Map | |
Review site for SEO issues | ||
After Migration To Actual Domain
Item | Remarks | Tools |
Make sure website is in HTTPS | ||
Check every button and link | ||
Check on mobile / tablet / desktop view | ||
Check browser compatibility | ||
Enable search engine visibility in settings > reading | ||
Make sure contact form is able to trigger notification |
Image Guideline:
Size: < 200kb
Naming example: machinery-engineering
Use small letter only
Use hyphen to replace spacing
Dimension
Type | Size |
Slider / full width background image | 1920px x 1080px |
Content image | 800px x 600px |
Favicon | 32px x 32px |
Avoid Google image, use stock photo instead, URL:
Slideshow Styling
| Item | Desktop / Notebook | Tablet | Mobile | Font Weight | Letter Spacing | Color |
Heading | Size: 50 LH: | Size: 28 LH: | Size: 28 LH: | 700 | 0 | Depends |
Description | Size: 20 LH: | Size: 18 LH: | Size: 18 LH: | 400 | 0 | Depends |
Button | Size: 18 LH: | Size: 16 LH: | Size: 16 LH: | 400 | 0 | Depends |
LH = Line Height
Font Styling
| Item | Desktop | Tablet | Mobile | Font Weight | Letter Spacing | Color |
| H1 / Page Title | Size: 42 LH: 48 | Size: 35 LH: 41 | Size: 35 LH: 41 | 700 | 0 | #333 |
| H2 | Size: 37 LH: 43 | Size: 28 LH: 34 | Size: 28 LH: 34 | 700 | 0 | #333 |
| H3 | Size: 28 LH: 34 | Size: 23 LH: 29 | Size: 23 LH: 29 | 500 | 0 | #4c4c4c |
| H4 | Size: 21 LH: 27 | Size: 16 LH: 22 | Size: 16 LH: 22 | 500 | 0 | #4c4c4c |
| H5 | Size: 18 LH: 24 | Size: 14 LH: 20 | Size: 14 LH: 20 | 700 | 0 | #4c4c4c |
| H6 | Size: 16 LH: 22 | Size: 14 LH: 20 | Size: 14 LH: 20 | 400 | 0 | #4c4c4c |
| P | Size: 16 LH: 24 | Size: 14 LH: 22 | Size: 14 LH: 22 | 400 | 0 | #4c4c4c |
| Menu | Size: 16 | Size: 14 | Size: 14 | 400 | 0 | Depends |
| Button | Size: 16 LH: 42 | Size: 14 LH: 40 | Size: 14 LH: 40 | 400 | 0 | Depends |
| Copyright Sentence | Size: 14 | Size: 12 | Size: 12 | 400 | 0 | Depends |
LH = Line Height
CSS Styling
Bridge Theme: Add custom CSS styling to Qode Options > General > Custom CSS field.
Use CSS class
Add it to section to standardize the padding adjustment for different screen size.