Hi.
What are your top tips for starting a new project?
I have all assets, html codes, tracking codes, fonts decided on and layout in mind.
Can I delete all other fonts fonts example?
If you delete fonts then you will not have those in any other project you might create. You then would have to add fonts for the new project. The fonts are in the global preferences of Blocs (Font Manager) and not in the project settings. Some Blocs users have in their wish list to store fonts depending on the project, because if a web designer has many projects, he/she will end up with a “gazillion” of fonts and it always takes very long to find the project specific one. Having many fonts in your Font Manager does not affect page loading speed, because only fonts used in your project do count.
Thinking about how and where to store all your necessary website design files.
What categories shall the website have (e.g. Home, About, Gallery, Contact) and the web pages’ layout (that you have already).
Thinking about the web hosting company and web hosting server requirements (like cPanel, needed databases, SSL certificate, etc.)
Getting all the necessary rights of moving and still images, sound files, people’s comments and testimonials, and of corse the right to use specific fonts (especially web-fonts), as well the legal documentation for the terms and conditions.
I put a little personal workflow paper together some while ago (as an orientation for myself, which I of course never follow 100% but as a guideline) based on the working method of the great Eldar, whose tutorials are a must for any Blocs afficionado.
Useful Arrangement Tips for Website Creation in Blocs 3
1. WORKFLOW START
- Start with the creation of the page numbers
- Then work on the home page elements and position the H1 with Subtext (H3) for the homepage top, as well as the Blocs title texts (H2) for each page. Put in respectively create Blocs with images and/or text or placeholder images/text. Adjust the vertical spacing of images/text.
• • • TIP
Adjustments in the XS Breakpoint does adjust it for EVERY breakpoint in the same way!
So switch from the LG breakpoint to the XS breakpoint, make the adjustment (e.g. centre object or text) and get back to the LG breakpoint. (Object or text is centred on every breakpoint now)
• • •
2. ADJUST GLOBAL FONT AND SIZE SETTINGS
(The font sizes and colours change with every project depending on the used font and designed layout.)
Breakpoint LG MD SM XS
H1
Typeface: e.g. Lato 900 inherited inherited inherited
Font Size: 40 35 30 28
Line Height: 48 43 38 36
H2
Typeface: e.g. Lato 900 inherited inherited inherited
Font Size: 30 28 25 23
Line Height: 38 36 33 31
H3
Typeface: e.g. Lato 700 inherited inherited inherited
Font Size: 23 22 21 20
Line Height: 31 30 29 28
H4
Typeface: e.g. Lato 400 inherited inherited inherited
Font Size: 20 19 18 17
Line Height: 28 27 26 25
H5
Typeface: n/a inherited inherited inherited
Font Size:
Line Height:
H6
Typeface: n/a inherited inherited inherited
Font Size:
Line Height:
Paragraph
Typeface: e.g. Lato 400 inherited inherited inherited
Font Size: 16 16 15 14
Line Height: 24 24 23 22
Label
Typeface: e.g. Lato 400 inherited inherited inherited
Font Size: 16 16 15 15
Line Height: 24 24 23 22
Links
Typeface: e.g. Lato 400 inherited inherited inherited
Font Size: 16 16 15 14
Line Height: 24 24 23 22
Colour: e.g. blue
Navigation Links
Typeface: e.g. Lato 400 inherited inherited inherited
Font Size: 14 14 13 13
Line Height: 22 22 21 21
Logo Text
Typeface: e.g. Lato 900 inherited inherited inherited
Font Size: 23 23 23 23
Line Height: 31 31 31 31
Colour: e.g. black
• • • TIP
The smallest Breakpoint XS is for the iPhone 5!
The Best Logo size for the XS is 200 px width and ca. 70–80 px height. If the logo width for the XS is larger than around 200 px, the Hamburger will be positioned below the logo instead next to it.
• • •
3. WORK ON THE NAVIGATION AND REFINE THE VARIOUS TEXTS
- Set Custom Classes in order to adjust the Navigation (Font, Colour, Hover state, etc.). Check the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov) Episode “Begin - 7. Custom Classes” to learn how to manipulate the Navigation with custom classes.
- Refine the text elements like Headers (H1-H6, Paragraph, etc.) with custom classes. For example to make H1 headers in capital letters or define the text colours.
4. CONTINUE THE WORK ON THE HOME PAGE
- See the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov ) Episode “Begin - 8. Using Columns, Rows, and Brics” to learn how to adjust columns for the various Breakpoints.
- Refine the Buttons with Classes. Text Size of buttons +10 = Line Height (e.g. Button Text Size 14 plus 10 px = 24 px for Line height.
- Add Padding to the buttons. Highlight the Margin & Padding Icon in the Class Editor for the class “button” holding shift and click on the left vertical and right vertical side. Then adjust the Padding of the left and right button edges equally and symmetrically relative to the text for any breakpoint. See the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov) Episode “Begin - 9. Advanced Styling of Buttons”.
- Now adjust the colours and shapes for all the buttons in the “button” class.
• • • TIP
1.65 is the best image dimension ratio** (landscape mode) for the whole monitor screen in a browser view, especially for the carousel.
• • •
5. BUILDING THE FOOTER
- See the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov) Episode “Begin - 11. Building the Footer” to learn how to create the footer.
• • • TIP
Default Website Width: 1140 px
This is perfect for: 1140 : 2 or 3 or 4 or 5 or 6 or 10 or 12 or 15 or 19 or 20
• • •
6. BUILDING THE CONTACT FORMS
- See the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov) Episode “Begin - 14. Creating Contact Forms” to learn how to create the contact forms.
• • • TIP
Image File Size for largest breakpoint always (at least get close to) < 500KB
Background Image: Width = 2500 px (edge to edge)
Regular Image: Width = 1600 px
Image in Contact Area: Width = 1200 px
JPEG Compression (best for all browsers) around 60 – 70% ! Watch out for and avoid compression artefacts !
Note: Even if all images have the same dimensions, the image file size after compression varies depending on the image properties before compression (e.g. many or few different colours). This means some images look fine with more compression but others will produce artefacts and need less compression to reach their individual optimum balance of compressed file size and artefact-free image quality.
• • •
7. CHECKING ALL THE PAGES FOR CORRECTNESS AND RIGHT BREAKPOINT SIZES
- See the Tutorial Video (Blocs 3 for Beginners by Eldar Gezalov) Episode “Begin - 15. Double Checking Everything” to control and verify that all the elements like links work and that the breakpoints properly display them.
Maybe this is of any help. Go well!
6 Likes
Hi @StFoldex
Thank for finding the time to share this.
It’s good to know I was 80% of the way by trial and error, and watching the lessons from @Eldar.
I wish I could pin this to make sure as many amateurs like myself could see it.
Thanks,
Andy.
1 Like
Create a draft project with as many essential points as possible in place and use that as a starting point on every project. This will evolve over time, however it will save you hours of time setting up new projects and cut down on potential errors.
3 Likes
Also a typography page is handy to set up all your made font tags, lists, buttons etc.
2 Likes
