Basic groundwork/Philosophy
- Design is wide ranging, but it can be constrained and concentrated to extract specific values and meet specific objectives.
- Design is subjective, but its utility can be measured objectively.
- The economics that require and employ design aren't allies of design.
- The tools and process used to pursue and realize design evolve.
- The study of design is likely different for any two aspiring designers.
- I am not a designer. (Unappealing visual sensibilities? I am a driven, but happy fool. With input all along the development cycle, I am more like the glue.)
There are many "schools" of design, all better than my rambling approach. You might be ready for a better teacher.
Reduction, Specificity.
- My focus has been related to design of web pages/applications.
- Utility first. Aesthetics maybe never. (Cost/benefit.)
- Getting paid.
An objective measure is driving revenue: that might be in the currency of clicks or conversions, but if it doesn't translate to dollars you are running out of runway.
General approach.
- Define the project specifics.
- Ascertain the branding and visual expectations.
- Initial design concept(s).
- Moving forward, back, or on.
- Deliver.
- Ongoing arrangement / SLA.
Gotchas
- Resist vendor lock-in.
- Open-source/projects, standards, trade-offs.
- Costs associated with convenience.
- Decoupling.
- Maintenance.
- Safety, threats, landscape concerns.
- Monetization.
Continuous obsolescence.
Over the years the collection of resources appearing here quickly becomes outdated. Because I'm not actively paid to maintain this, it's a continuous cycle of dusting, dust gathering.
Hodge-podge
Here's a brief collection of design and building related resources that I use or have had suggested by others during the process of creating a design, or converting a design into the web related pieces: HTML, CSS, or JavaScript. (Notes added where possible.) Also, I have no affiliation with these, I've simply found them helpful during one or more projects. Your mileage may vary.
Graphics, Color, Layout
- Color Scheme Designer
- Colors - Canvas Design Wiki
- GIMP - a freely distributed alternative to sometimes expensive graphics programs for creating and editing graphics.
Hosting/Versioning/CI
- Netlify - a hosting solution for static sites
- GIT - free, open source distributed versioning system for your project
- Bitbucket - a location for your git repository, integrates well with netlify
Website Analytics/Monitoring
- StatCounter - helps with gauging visitor traffic and trends
- Google Analytics - helps surface additional detail/opportunity to improve user experience
- Website Monitoring Tools - (Blog/Review) Help with keeping your site available for traffic.
HTML/CSS/JavaScript - Reference/Tooling/Examples
- W3Schools - basic online reference manual with examples (quick help testing tag implementations you may need familiarizing with).
- Stack Overflow - a collaborative problem solving resource (can be helpful troubleshooting vexxing or obscure issues around config-style programming common with frameworks du jour).
- Online JavaScript Compression Tool - online javascript compressor (a personal favorite)
- W3C Cheatsheet - if you use a modern IDE for dev, much of the value site's like this provide may be built-in to the IDE's tooling. Keep in mind, it's probably wise not to become dependent on your tool of choice (see risks associated with vendor lock-in).
- Markup Validation Service - a working webpage is the first goal, but one that passes doctype validation offers a boost in professional pride (and might help with "future proofing" in cases of vague browser-vendor implementations).
- Visual Studio Code (vscode) - a popular free development IDE with a fantastic level of community support building extensions and services to augment web and general software dev.