I’ve looked through the Elements documentation but haven’t found any guidelines for setting up a project. Let me explain. I’m looking for a kind of guide to designing a website from scratch while respecting the principles suggested by the software: Headers: what type of color (brand, accent, etc.), the same for subtitles, text, page background… A sort of guideline so I can then change themes as I please without having to redo everything, as I’ve already read.
Establish your brand colors at a minimum, more color choices if necessary.
Choose your breakpoint sizes.
The above are all style issues, but if they’re not in the Theme, then you’re going to have lots of issues downstream. Look at what other sites do as examples to get ideas for Theme. Looking at the free projects is one way of seeing how they’re set up IN THE THEME.
On your home page, create the following Component structure: (a) Menu, (b) Container, (c) Footer. Keep tweaking your menu and footer until you like them, then make them globals. It’s possible that you might want to put Flex/Grid in the Container between them that will be consistent across pages, if so, do that next.
Establish your basic page structure (you can add to it later) with blank pages that are named (home, blog, gallery, contact, etc.). You can add sub-pages later. Add the Header/Container/Footer construct to each page.
For as many of the SVG, JPG, PNG, and other assets you’re going to use on the site, build out the Resources section with a folder structure that matches the page structure you just created (e.g. /resources/images/page/resource.xxx).
If you’re going to use the CMS, add the necessary folders and files (ala Microblog), plus make sure you add a Posts page and an Authors page to the structure you built in #5.
Design away with the Essentials add-on and the built-in Components. Some say start by getting all pages right for mobile first, then using breakpoint overrides to change design as the screen size goes up. Some of us do it the opposite way. But pick a direction! Get things right at the min or max size, then work your way to the other end.
Add your content to the Essentials and Components you used in #7 (I always start with the default lorem ipsum content because I’m worried about style first, content second, when designing a site. Likewise, add your beginning CMS content.
Do a complete and thorough Preview walk-thru of your site.
And throughout: file, folder, page, and resource names should be all lowercase, no spaces, hyphen-instead of space if you need it.
Thank you so much for all these details, it’s very kind of you.
To elaborate further, I’m thinking of text color, background color, brand color, accent color… To avoid struggling with all of this for years, is there a rule to follow?
For example, titles in the brand color, subtitles in the accent color, etc. These are just examples, of course, but it would help me enormously (and I’m probably not the only one…) to properly structure a website from the start.
So you have another challenge embedded in this one: are you going to do both Dark and Light sites? That’s where it gets really challenging getting colors to look right.
But let’s just assume Light mode. Here are a few of my starting points:
Don’t make the background white. Very very near white is fine, but not bone white.
Don’t make the text color black. Very very near black (perhaps with a tint of brand color), but not pure black.
Headers are where brand color starts to come into play. If your text is near black, then the header is the darkest shade of your brand color that you’ll use, and a sub-header might be one shade lighter.
Accent colors would be lower levels of brand color or a complimentary color to the brand color.
But here’s the thing: if you buy the Color Collection (sorry @dan, I’m not going to use UK spelling ;~), open the Project that comes with it, and you can open the Theme settings and play with them in the Components while seeing how that impacts how the Project feels. Just dial in fonts, sizes, and colors in the Theme settings for each of the Components in the Project until you have what looks good to you.
For example, I think the Themes that come in the Color Collection are a little too pushed towards the center of colors. Amethyst, for instance has too much purple in the background, not enough black in the text color.
I might even push it even further away from the purish purples, but that should give you a sense of how easy it is to do this kind of judgment the way I suggest.
I’ve read and watched videos, but I haven’t found anywhere (maybe it’s just me?) this kind of advice that tells you which font type (Brand, Text, Background, etc.) is used in which situations… How to mix font color with accents, marks, etc.
this is all down to personal opinion…look at the millions if not billions of web pages for ideas. people give advice here but thats their opinion. Some sites you would say no way id use that others you will think thats a good idea. everyone looks for different things in a website. for example if I visit one thats too ‘‘busy’’ im off. if it has luminous colours im off.
this is from google Most visitors leave web pages in 10–20 seconds, with many deciding whether to stay or go within 3 seconds. While some research suggests an average visit lasts around 54 seconds, users generally only read, at most, 28% of the text on a page. To keep visitors longer, sites must communicate their value proposition immediately and load quickly
Yes, but the original question has been diverted. Indeed, despite all the very good advice received, the question was:
I’m looking for a kind of guide to designing a website from scratch while respecting the principles suggested by the software: Headers: what type of color (brand, accent, etc.), the same for subtitles, text, page background…
To put it simply: how to keep the original foundations of a theme as close as possible.
The CMS book is currently on its fifth revision. Once Realmac allows books on the store, I’d think that you’d get updates the same way you get them for Projects and other things.
I’ve been doing eBooks for 25+ years now. Keeping them up-to-date is really just keeping up with the product they follow. The real pain point has been in delivering updates reliably (tip: email is not effective).
I think you should take a closer look at the TAILWIND manual and notes: https://tailwindcss.com. There you’ll find the relevant terms with corresponding explanations. All other functionalities are also explained there.
