Web Design Tips
Design Tips
- Use styling options to make sections more interesting – shape dividers, motion effects etc.
- Overlay images are easier to style than background images.
- Avoid using more than 2 different fonts that include multiple weights
- Avoid selecting different colours for each element with the colour picker
- Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes)
- Always open external links in a new tab
- Copying styles in sections and widgets
- Less is more. Try and stick to a handful of font styles and colours – this is where global fonts and colours can really help. I could show some brand guidelines from various companies?
- Keep useful functions/css tricks/other things you use often in a note-taking app
More Design Tips
Use styling options to make sections more interesting – shape dividers, motion effects etc. Overlay images are easier to style than background images. Avoid using more than 2 different fonts that include multiple weights Avoid selecting different colours for each element with the colour picker Avoid using extra columns and spaces to control the positioning of a widget(eg different text boxes)
Always open external links in a new tab Copying styles in sections and widgets Less is more. Try and stick to a handful of font styles and colours – this is where global fonts and colours can really help. I could show some brand guidelines from various companies? Keep useful functions/css tricks/other things you use often in a note-taking app
Useful Design Websites
- https://coolors.co/ – colour palettes
- https://www.colourlovers.com/ – colours, palettes and patterns
- https://brandmark.io/ – quick logo maker
- https://www.mixfont.com/ – font combinations
- https://www.framer.com/ – browser based design tool
- https://www.designspiration.com/ – browse and save design inspirations https://duotone.shapefactory.co/ – create duotone imagery
- https://www.iconfinder.com/ – icons ($2 each)
- https://www.photopea.com/ – photo software
Free Image Sites
Free Image Sites
SEO & ACCESSIBILITY
Accessibility is mandatory
SEO is optional
Accessibility is your priority
But why not do both so you rank well in Google? Google will reward you.
Don use colour just to signify information – colour blind cannot see red vs green.
Page title : Header 1
Title : header 2
Subtite: header 3
Sub-subtitle: header 4
No lower generally.
IMAGES
Google cant see what’s in an image
Neither can visually impaired
So you should use alt text
TEXT
Justifying text can be hard for dyslexia as it gives different spaces between words depends on machine used – making it hard for dyslexics.
Google doesn’t see font/colour/style in the code – it just cares about the structure of content
Sue – I particularly love Roboto weight 300. Looks lovely on a web page. However, weight 400 (the usual default) – whilst less “pretty”, might have more contrast for those with a visual difficulty. Should I therefore accept a less attractive font?
LOGO
Create a 512 x 512 image
Create the image – get rid of sub text and text.
That can be added later if needs be. But question – is it necessary. If you engage text into the logo image, it will reduce the size of the image and it becomes unnoticeable.
https://responsively.app/
How good is your website accessibility
Type your website into: https://wave.webaim.org/
Plugin
accessibility tools and alt text finder
https://en-gb.wordpress.org/plugins/tool-for-ada-section-508-and-seo/
https://accessibe.com/ online servce – has affiliate
SITE SETTINGS
Astra > Site Settings
Set…
Global font and size
Size of H1, H2, H3 etc
Link colours
Other global colours
Buttons
FOR BRADFORDVTS
Page title H1
Page title subtext: H2
Blue subtitles: H3
Sub-subtitle: H4
Paragraph – Roboto 300 forgotten size.
BLUE background title header….. set the blue as a global colour – then set each section to that colour. Then you can change in the future.