Home Page: Sections
In this lesson we are going to:
Familiarize ourselves with section types and available section templates
Learn how to create a section design from a 'blank section', using blocks
Create a 'first draft' section layout for the home page
THEN go back in to refine image selections & add your own copy
Exercise 1: Creating Home Page Sections
This is a big next step. Give yourself plenty of time to explore and not have anything 'matter', as you get familiar with section types, block options, moving blocks around on the grid, resizing and more. Taking your time honing these skills will serve you well as your trudge along in your design process. When I first came to web design, I let my beginners mind be fully curious about what was available to me.
When it comes to laying out section design, think: COLLAGE
I find section design and layout design to be the digital version of creating a magazine cutout collage. Instead of gluing word snippets and pictures onto a back board, you are uploading digital images and creating text boxes, then choosing where they look best, deciding how they will layer on top of one another, what needs to be most prominent and highlighting the important bits with the digital tools available to you (think of this as glitter glue or sequins).
What you should know after this step:
What section templates are available & how to tweak them
Change the 'color theme' for each section & review of how to change the color of a specific item using 'site styles
Create a section layout design from using a 'blank section' and adding blocks
FEARLESSLY move blocks around, resize using the side/top/bottom toggles on images and text boxes
Add background color block to your text box
Add, resize, edit, crop, overlay, etc... an image block
Upload an image or video as a 'section background'
Overall: know how to explore, create, feel comfortable messing up and starting over, plus reaching out with specific question not covered here
Resources: Pirate Ipsum & Hipster Ipsum
Action Steps:
Explore section templates and practice tweaking them
Create your layout design from a 'blank section', using block options
Add stock images and lorem ipsum while you play with design settings and layout, proportion, sizing, etc...
Create a 'first draft' of your home page layout design
Go back in and refine the images you use and add your own copy writing
Final Thoughts:
Thank you for your willingness to come to the design table with beginners mind and taking the time to get comfortable with the tools we're starting to use. Once you know what's available to you, it gets easier to use these tool to manipulate and customize your design and overall web.
Next we'll be getting into pulling more branded and specialty design tricks into the mix. But this step cannot and should not be skipped. You've gotta earn those wings in order to fly! Also, I want to note that although I will cover A LOT, there may be something specific you'd like to know how to do I don't think to include in the curriculum. There's just so many things! So if after Module 7, there's a design element I didn't cover that you want to learn about... just let me know and I will create a separate mini lesson to share with all.
At this point though, we are just getting comfortable with the basics and getting our home page set up, getting just the right images in place and adding your copy writing.
