Dark background: #1E253A (with or without background image with opacity)
Light background: #FFFFFF or #F9F9F9
Lighter blue: #252E49
Yellow (accent, never as background) #FDE000)
Font color: White, black
Heading font: Raleway regular+bold (bold words that should stand out, always in caps)
Body font: Opensans (bold sentences that should stand out)
CTA button: Round and yellow FDE000 with black font in caps
Imagery: Use epic/grand imagery in backgrounds only (with opacity), avoid photos overall, and never use "stocky" photos, especially not on people.
Icons: Use icons with caution. If used at all, keep them simple, non-cluttery and clean
Tone of voice: We are human, informal and honest on one hand, and bold, skilled and professional on the other side. Important not to overdo any of the sides, but rather to find a good balance. Do not create too dark designs.
Other input: We like to divide the content with clear color blocks (alternating light vs. dark). We also like the blocks to be slightly angled/tilted to avoid straight lines - important to not overdo it though, just a slight angle please (1,3° looks good).
- Keep it clean
- Make it readable and clear
- Do not make it too dark, more light than dark
- Use the yellow with caution, use primary for call to action
- Keep mobile in mind, make sure that elements stack properly in mobile
Update: Attached is a merge (ugly, we know) of the best elements provided this far. Below is detailed instructions for each element. We will continue to update this, so make sure to stay updated. We will notify you in direct messages.
1. First screen
We want to create a clear, inspiring and balanced first impression. The use of round meny-icon ex. Background can be found here - https://i.imgur.com/2rNSqXG.jpg. Feel free to position the pitch "THE GROWTH FOCUSED AGENCY" below the logo if you wish.
2. Intro text + video
We have a story to tell, make sure we have enough room. We have also added a short founder greetings video which we have included in the brief.
3. The difference (updated model)
We want to clarify that we are not "yet another agency" only focused on tasks, but on growth (company success). We have combined skills from marketing, innovation, technology and management to do so. This model is NOT designed/done, but should instead work as inspiration for you.
4. The offer
None has still not sent a design that is good. We believe that we should work with 6 boxes describing the 5 offers we have (execution, management, teams, technology and education) and a call to action in the sixth box getting people to contact us for a free growth audit. PS. Do -not- include full description of each service on frontpage, only an excerp. Full description will be on our offer page.
5. The results
We very much like this design proposed by one of the designers. We -do not- want to describe each case in detail here, but instead want to trigger people to go to the case page to read more. This is why we only have the +xyz in the boxes.
6. The tech partners
Our technology partners are important to us (google, facebook, mixpanel, hotjar, sitegainer etc) and this design is looking great. We although would like to use round circles instead of hexagon shapes.
7. The happy clients
This part of about soft, emotional trust. We want other clients to see that our clients enjoy us. Make sure to put emphasis on the story/testimonial. We think that this design is good, but not perfect. Please feel free to improve.
8. Call to actions
We like how this design make the CTA-box appear as "cards" coming up from the footer. It is good, but not perfect. Please also remove icons.
9. The footer
We have not yet seen the perfect footer, but this is pretty easy to do so we will not put emphasis on this at this time.
Attached is a LOFI-wireframe of the case page. We welcome some creativity, but please stick to the collapse-expanded we have decided.
The purpose of the case page is to clearly visualize the width of projects (from brand clients to performance e-commerce to B2B and non-profit), which is why we want to use a "collapsed" look showcasing many cases at once. Users can then click to expand every case to read more.
Time for the next page type - Our Offer (99d-ouroffer.png below)
As with the case page the wireframe for our offer is lofi but we are certain of the general disposition.
The first offer block (EXECUTION) contains a text box of benefits, we want to use that on every block to describe our deliverables in each area.
Please remember to use CAPS in the headings.