Study – read recommended texts, watch videos and tutorials
Reflect – make notes based on studies. Write “what I learned” blog posts
Practice – complete project tasks to practise what you have learned. Seek support if needed
Feedback – make notes on how to improve
HTML points to bear in mind
<br> and <hr> – to use or not to use? They are used for presentational purposes. If so, then why bother using them if you can then just style in CSS (say by creating border-bottom lines?). Best not to use.
Don’t necessarily need to indent the <head> and <body>, but it’s a good idea for ease of viewing.
NEVER add anything to your code that you don’t understand.
Always make alt text as clear for screen readers as possible.
NO inline CSS or <head> <style> CSS!
By default an img should always have a height and a width. But are they considered presentational and therefore irrelevant? However, height and width has a specific function. The browser then knows how much space to reserve for the image. Otherwise, all the text jiggles about as the image loads, which is very annoying.
On organisation – it doesn’t matter how you organise your folders, as long as it is very clear to you.
For file and folder names – we use hyphens, not spaces or underscores.
Here’s the best suggested practice for beginners:
CONTENT OUT
Do NOT use lorem ipsum. Remember we build from the “content out”. How does the content influence the design? Layout has to be meaningful. We do not design first.
“Content precedes design. Design in the absence of content is not design, it’s decoration.” Jeffrey Zeldman
Who are you designing for? Remember it’s not about what YOU like. What do people need?
PROTOTYPES
Learn to prototype well using HTML and CSS.
Mockups are no longer the way to do things. They are static. We should go straight from wireframing to prototypes we can interact with. The client should get a real feel for the product straight away.
IDEAS
Do not dismiss the importance of pen and paper. It can be an effective tool for brainstorming.
We should always have evidence of the design process. The tools are not important.
Write down your ideas. Even if they are stupid to you.
Affinity Photo and other programmes are alternatives to Adobe. Figma and Sketch are other alternatives.
Ultimately the choice is software is no longer important. There are many choices, so use what you have access to. Just get on with it.
FILE SHARING AND BACKUPS
More than one backup – on your machine, an external drive, and also online.
CarbonCopyCloner is one piece of software that aids backup to an external drive, and SYNC is a tool for online backup. Have now made a SYNC account and uploaded my files to it.
Never rely on a single copy of your work. Set this up ASAP.
Jeffrey Zeldman – Designing with Web Standards is a hugely significant book. Jeremy Keith has put the ideas into easier to understand terminology, but this book is still worth reading for context.
Don’t forget A List Apart articles.
Check out work by Eric Meyer and his writings on CSS.
Take a look at Dave Shea’s Zen Garden. Look at how different the CSS can make a site look despite the HTML remaining the same.
Remember you have access to Linkedin Learning.
Read as much as you can from the recommended material.
Clear Left – a well-known agency in Brighton. They do internships.
Responsive websites will be pushed higher up on search engines. Think of it as Google rewarding for good practice.
Content
Accessibility
SEO – fresh quality content that is regularly updated will get better search engine results
Content over aesthetics – aim for a balance, but content is the key draw overall
What makes a bad website?
long loading times (slow server hosts, large imgs, etc.)
poor quality content, signups
poor aesthetics, different fonts
unclear layouts, unpredictable navs
long user journey
unresponsive
A little bit on the history of the web (as read in Jeremy Keith’s book Resilient Web Design)
the Mosaic graphical browser was released in 1993 and was the first to contain images.
The beauty of the web – it is backwards-compatible. Content from 1989 can be viewed today.
Growth of the Web
The number of domain names is falling in recent years. There are so many domain names that they can’t be snapped up and sold on for a profit. For example, there isn’t just .com, there’s now .blue, .pizza etc.
Nobody should be excluded from the web. However, we can see that not every continent has equal access to the web.
Who coordinates Web technologies?
We need an independent org to moderate the web and set the rules. We have Web Standards that set the rules, created by a consortium known as WWWC (World Wide Web Consortium) and founded by Tim Berners-Lee.
On Designing
Think of all the things that need to be considered when designing something.
Look at the laundry liquid dispenser evolution. Watch how beautiful, efficient simplicity becomes ridiculous complication and over-decoration. The problem is if one does it, other producers do it as well. It is no longer functional. A masculine looking dispenser to appeal to the ‘new man’ of the 1990s for example.
Think about the role colours and other design features play in conveying info to the user.
Design Principles
Check out the book the Universal Principles of Design
Look at the slides on the Golden Ratio and Hierarchy.
Hick’s Law, where too many choices can take more of the user’s time.
Ockham’s Razor – the simplest design wins.
The Expectation Effect – you pick up a bag of red crisps and expect them to be ready salted. Or looking at a collection of rectangles and know that the bottom rectangle is a footer. Or knowing that upside down bottles are likely to be conditioner, as opposed to shampoo.
What is Good Design?
“A designer knows he has achieved perfection not when there is nothing left to add, but when there is nothing left to take away.”
Simple and inclusive is key. How can you make the design feel invisible as you take it for granted so much?
To become a better designer, you must become critical of every designed object you see and use.
