Component Based Design
This page includes custom-designed components which can be used across the entire website. These components are like LEGO bricks, which we can assemble in various ways to build your subpages and sections by composing and arranging them in order to achieve the desired goal. A component is like a ready-made element, which you can fill with any content or add graphic elements to. Examples of such components include text blocks, a photo banner, a contact form, or a call-to-action block.
The benefits of this design system are many, including:
- You don’t have to pay me to design new pages/sections from scratch when you wish to expand the site (unless you want to - in which case I'm happy to help!)
- You get a realistic visual of what the website design will encompass before it is built
-
We get to work together to perfect the design before developing the site, eliminating design scope creep and associated costs
NEXT STEPS
KEY LINKS & RESOURCES
Adobe Stock library of curated images you can choose from.
Your Professional Images on Dropbox
Award-winning websites of similar style.
Colors Used
OK...HERE WE GO! SCROLL DOWN THROUGH THE SECTIONS UNTIL YOU REACH THE FOOTER.
Option 1 - simple grid on gradient background
Steel blue boxes with (choose your fav color) buttons
Community Development (VCDP/CDBG)
The Vermont Community Development Program (VCDP) assists communities on a competitive basis by providing financial and technical assistance to identify and address local needs in the areas of housing, economic development, public facilities, public services, and handicapped accessibility modifications.
Community Development (VCDP/CDBG)
The Vermont Community Development Program (VCDP) assists communities on a competitive basis by providing financial and technical assistance to identify and address local needs in the areas of housing, economic development, public facilities, public services, and handicapped accessibility modifications.
Community Development (VCDP/CDBG)
The Vermont Community Development Program (VCDP) assists communities on a competitive basis by providing financial and technical assistance to identify and address local needs in the areas of housing, economic development, public facilities, public services, and handicapped accessibility modifications.
Section 1A - image page banner.
Each page and sub-page will start with this banner. The image can be replaced with any image of your choice that feels aligned with your brand style. Refer to the Adobe Stock Library of curated images that I put together for you to choose from.
Our region working for you.
Serving businesses of all stages and sizes in Vermont's Upper Connecticut River and White River Valley regions.
Section 1B - solid page banner.
Solid color with cropped white wave.
This is your heading.
This is your sub-heading or couple of sentences to introduce the section/page. You can choose any color for the background here.
Section 2A - one column section introduction.
Custom graphic background. I would follow this intro section with a white background so as not to saturate the page too much.
Funding Opportunities
GMEDC wants to help your business succeed. Whether you are trying to grow or simply get off the ground, we can help you apply for regional, state, , and federal funding sources that meet your business needs. GMEDC also manages some regional loan opportunities like the Hartford Revolving Loan Fund.
REAL PEOPLE, REAL STORIES
How Lulu Web Design used the Hartford Business Economic Grant to survive during Covid.
This could be a short story about how someone used the loan, or this could be an intro to a bigger story where the user clicks the button to learn more (opens new page or pop-up). We can link to the business who got the loan (this will give them a little SEO boost and a little free advertising). Include a pic of the business owner or their logo.
NO Section 2B - one column section introduction.
Animated text. Currently looped so you can see it (if you are not seeing animated text, let me know).
OPTIONAL HEADING
People don't want what you make, they want what it will do for them, and how it makes them feel. People don't connect to facts and features, they connect with honest stories, experiences, and outcomes. Your business will grow when you deeply understand your customers and the positive difference you make in their lives.
Section 2C - one column section introduction.
Gradient background.
Gradient Background
This background can be used in many ways - with a white form over it, just white text, an accordion, etc. I chose green to go with your brand colors, but can create in any color of your choosing. Technically, gradient backgrounds are not considered "flat" design...but it's ok not to play by the rules.
Section 2C - one column section introduction.
Animated background gradient.
Animated gradient background
Your subheading or short paragraph goes here.
Section 2C - one column section introduction.
Grunge background static graphic.
Your heading goes here.
People don't want what you make, they want what it will do for them, and how it makes them feel. People don't connect to facts and features, they connect with honest stories, experiences, and outcomes. Your business will grow when you deeply understand your customers and the positive difference you make in their lives.
MAYBE Section 3A - section introduction + 3 text columns
Solid background (can be replaced with any color from your palette) with 3 text columns with white background. It is important to keep the text in each column reasonably similar in length, or the balance will be disrupted. Whenever you have uneven amounts of text it is better to use an accordion.
Solid background
Your subheading or short paragraph goes here.
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.
READ MORE
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.๏ปฟ
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
๏ปฟ
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.
Section 3B - section introduction + 2 text columns
Solid background (can be replaced with any color from your palette) with 2 text columns with transparent background. Heading in Fjalla One - orange with slight white outline.
SOLID BACKGROUND
Your subheading or short paragraph goes here.
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.
READ MORE
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.
READ MORE
Section 3C - section introduction with text + image column
Solid background (can be replaced with any color from your palette) with a text column and an image column. Choose your image to go with the color of the background.
SOLID BACKGROUND
Your subheading or short paragraph goes here.
SUBHEADING GOES HERE
The poet lives and writes at the frontier between deep internal experience and the revelations of the outer world. There is no going back once this frontier has been reached; a new territory is visible and what has been said cannot be unsaid.
Poetry is a break for freedom. In a sense, all poems are good; all poems are an emblem of courage and the attempt to say the unsayable; but only a few are able to speak to something universal yet personal and distinct at the same time; to create a door through which others can walk into what previously seemed unobtainable realms, in the passage of a few short lines.
READ MORE
NO Section 3D - section introduction with image + accordion
(placeholder image & text). Solid background (can be replaced with any color from your palette). Image has cog behind it (if you like this style, I will outline the cog so it's not as solid).
How it works
NO Section 4A - two columns.
Bright & bold with accordion functionality (RH column) to allow for text heavy sections without disrupting the balance of the design.
DISPLAY HEADING.
Minimal text in this column. Accordion with more info in the column to your right.
Sub-heading goes here
Section 4B - two columns.
Slight variation on 2A. Static graphic applied to first column. The section above this should be white.
DISPLAY HEADING.
Minimal text in this column. Accordion with more info in the column to your right.
SUBHEADING GOES HERE
NO Section 4C - two columns.
Off-white background. Text + accordion column.
Bold, colored sections...
will be broken up with plain white sections to keep the site light/bright. Paragraphs of text should not expand beyond 760 pixels (the dimension of this paragraph box) because it's hard work for eyes to read sentences that span beyond that on a screen (exceptions made when using display/a large font size).
SUBHEADING GOES HERE
NO Section 4D - two columns.
Display text text heading over two columns of text, third column for an image. Choose an image with similar tones/colors as the background. ANIMATED gradient background - gradient can be changed to any color from your palette.
DISPLAY HEADING.
Sub heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus, odio in hendrerit pellentesque, odio augue auctor leo, in porta nibh.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempus, odio in hendrerit pellentesque, odio augue auctor leo, in porta nibh.
NO Section 4E - two columns
Two columns with vertical wave graphic
HELPING BUSINESS OWNERS IS WHAT WE DO
We have connections!
Whether you are trying to grow or simply get off the ground, we can connect you to the resources that your business needs. We're approachable, friendly, and invite you to call us, even if you're not sure how we can help.
Starting a Business?
A short sentence about how you can help goes here.
Growing a Business?
A short sentence about how you can help goes here.
Selling a Business?
A short sentence about how you can help goes here.
Business Challenges?
A short sentence about how you can help goes here.
Section 5F - two columns
Same as above but in orange with off-white background in first column.
HELPING BUSINESS OWNERS IS WHAT WE DO
We have connections!
Whether you are trying to grow or simply get off the ground, we can connect you to the resources that your business needs. We're approachable, friendly, and invite you to call us, even if you're not sure how we can help.
Starting a Business?
A short sentence about how you can help goes here.
Growing a Business?
A short sentence about how you can help goes here.
Selling a Business?
A short sentence about how you can help goes here.
Business Challenges?
A short sentence about how you can help goes here.
NO Section 5G - two columns.
Here I introduce lilac which goes well with the red but we can change these colors as desired. This component demonstrates a feeling of movement as you scroll down the page. The column on the right could be changed to an accordion if you have too much content to maintain design balance.
HELPING BUSINESS OWNERS IS WHAT WE DO
We have connections!
Whether you are trying to grow or simply get off the ground, we can connect you to the resources that your business needs. We're approachable, friendly, and invite you to call us, even if you're not sure how we can help.
Starting a Business?
A short sentence about how you can help goes here.
Growing a Business?
A short sentence about how you can help goes here.
Selling a Business?
A short sentence about how you can help goes here.
Business Challenges?
A short sentence about how you can help goes here.
MAYBE Section 5H - two columns.
This section (known as split screen) can be used to introduce a new section or page. I used the "grungey" VT image in this example, but you could replace the image as desired.
Some Grunge.
A hint of grunge added to your hilly theme which works well just like this - with a little black text over white to it's side. Add more text and it won't work as well.
MAYBE Section 5I - two columns.
As above with a different image.
Short Heading.
As above with flat design illustration. This image (and many others like this) are vector files, meaning we can adjust the colors and even change the shapes etc. if desired.
NO Section 6A - Various
Colored category heading text with drop-down accordion functionality to display more text. Off-white background, light horizontal divider line (only needed if section above is light/white).
Your Heading Here
SHORT SUBHEADING HERE
We base our solutions on evidence and knowledge. We question, to ensure that the right way isn’t actually the wrong way. We adopt inventive routes towards better results – steering clear of the conventional. Whilst bringing everyone along on an uncomplicated and straightforward journey.
CATEGORY ONE
CATEGORY TWO
CATEGORY THREE
CATEGORY FOUR
Section 7A - three columns.
Colorful text boxes can be used in lieu of images to categorize content. The learn more circle button can take the visitor to more information (a standard button can be used if preferred).
COLORS!
Short intro with click to more info (can go to another section on page or another page on site).
๏ปฟ
COLORS!
Short intro with click to more info (can go to another section on page or another page on site).
๏ปฟ
COLORS!
Short intro with click to more info (can go to another section on page or another page on site).
๏ปฟ
Section 7B - three column gallery.
Image boxes used to categorize content. Please choose images that are landscape and aligned with your flat design illustrative theme. I have added padding between the image boxes on the second row to demonstrate the difference.
MAYBE Section 7C - four column gallery.
As above but with vertical images and Fjalla One colored heading. It is easy to add or remove an image/column. Placeholder content.
Section 7D - Mixed Gallery.
This gallery (with placeholder images) has the same functionality as the above two, but with a different layout/design. Each image can be linked to any section or page on the site (or to another site or pop-up). What makes this gallery appealing is the choice of images and the amount of negative/white space around the subject matter. You could also choose to use solid colors in place of images (this would require creating solid color graphics to upload as images).
NO Section 7E - Text + Gallery
The gallery (with placeholder images) on the right displaying images in a circle instead of a square - subtle animation applied. The left-hand column allows for several paragraphs of text.
This is your heading
This is the text area for this paragraph. To change it, simply click here and start typing. Once you've added your content, you can customize its design using different colors, fonts, font sizes and bullets. Just highlight the words you want to stylize and choose from the various options in the text editing bar.
This is the text area for this paragraph. To change it, simply click here and start typing. Once you've added your content, you can customize its design using different colors, fonts, font sizes and bullets. Just highlight the words you want to stylize and choose from the various options in the text editing bar.
This is the text area for this paragraph. To change it, simply click here and start typing. Once you've added your content, you can customize its design using different colors, fonts, font sizes and bullets. Just highlight the words you want to stylize and choose from the various options in the text editing bar.
MAYBE Section 8A - mixed.
Shapes used to add interest to a structured section - placeholder content. Cog as background image (I would need to refine this design/section if it's a keeper). Note that the design will break if you add too much text to each text box.
How it works
Section 9A - 2 column w/form
Palette blues on custom graphic with LH text column and RH form. This is just placeholder content.
Go beyond your dreams
Now is the time to discover your full potential. Discover and develop meaning. Attain your dreams. Live a more fulfilling life.
We want to hear from you
NO Section 10A - 3 column list
Simple 3 column list over abstract mountain background.
SUBHEADING HERE
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
SUBHEADING HERE
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
SUBHEADING HERE
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
List text goes here
List test goes here
List text goes here
Section 10B- 3 column list
Simple 3 column grid list over gradient palette blue.
Over eight years of helping business owners in the Upper Valley of Vermont.
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
NO Section 10C- 3 column list
Simple 3 column list (no grid) over solid dark orange
Over eight years of helping business owners in the Upper Valley of Vermont.
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
Lulu Web Design
Brand Strategy & Web Design
Hartland, Vermont
NO Section 10D- 3 column text
Simple text columns with subtle abstract accent (custom made graphic)
ADD A TITLE HERE
Subtitle
This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets.
๏ปฟ
Just highlight the words you want to design and choose from the various options in the text editing bar.
ADD A TITLE HERE
Subtitle
This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets.
๏ปฟ
Just highlight the words you want to design and choose from the various options in the text editing bar.
ADD A TITLE HERE
Subtitle
This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets.
๏ปฟ
Just highlight the words you want to design and choose from the various options in the text editing bar.
Extras
Effects, Videos & Animation which I have not yet labeled.
Here's an example of how the commercial listings can be included as in iFrame, which is basically a website within a website. I can display any page on any external website in this way. Let me know if this works for you.
Video background
Join our community
Placeholder text and images, just to provide an example of how video and images can be displayed together.
Frosted Glass
This column demonstrates a technique called frosted glass effect. It works well when you want to display buttons or text over background images.
568
Businesses Served
$1M
Dollars Raised
0
People injured
Bokeh animation effect
๏ปฟ
This effect has many settings (background color, circle color and size, circle speed).
Gradient examples for fun.
Talk to a human.
We’d love to hear from you. Fill out the form to your right or just give us a ring we’ll get back to you as soon as we can.
We want to hear from you
Send us your details and we’ll get back to you to schedule a time to talk.
FJALLA ONE FONT
Our Story
Founded in 1982 as the Green Mountain Industrial Corporation, GMEDC serves as the regional representative of the state Agency of Commerce and Community Development. Specializing in economic development, we know that economic success depends on far more than business growth alone. Our work isn’t about economics, it’s about people. People start and own businesses, employees need local housing, and residents want local jobs - when the people in our community succeed, we do too.
How Can We Help You?
We are “the boots on the ground” linking government, education and private sector resources to help businesses of all sizes grow, improve and thrive, promoting the economic health of our communities. Whether you are an individual starting a business or one of the largest employers in the region, GMEDC provides access to economic development products and services such as financing guidance, technical assistance, or confidential business counseling.
Simple Gradient Boxes
