About this thing…
This is a rough prototype – a useful scratch so to speak. You can see some of the modular layouts happening in “All” blog posts. The intended goal here is to make an abstraction of the individual elements that make up your content.
The biggest challenge with most web development work is when the client doesn’t know what is possible. This prototype aims to save time, long term effort and planning. The goal is to effectively understand data input by knowing what pieces of a “modular” content puzzle you’ll be putting in when matched with your message.
This is also a constantly changing prototype which can be “skinned” with your preferred layout or design. Most websites are the same and most layouts have very similar UI principles. We have designed the prototype in such a manner where it would automatically adapt to responsiveness. But it’s mostly a continuing work in progress that always improves.
The design may change the but the underlying content thought behind your site remains the same.
FULL PAGE EXAMPLES
Click on the navigation above to see an actual full page sample. Or just click on home
LAYOUT MODULES
MainSide
MediaInfo
Hero
Feature Set
Heading Set
CONCEPTS
Immediate Plan
- Need to create full page samples to illustrate a planned layout for the homepage and several other versions of subpages
- Need to visualize how practical the menu would be if we need a Mega Menu
- Need to have a conversation with Chase / Darren on finding modular patterns with the content that will end up written for the site
- Need to checkout API integration for CRM
- Need to create an under construction section on the actual LIVE homepage
- Need to checkout that “Legends Classic Diner” place that I accidentally found online when I get back at Glendora
Layout Analysis
I hate listening to the sound of my own voice but this loom video is a real convenient way of recording previous conversations. I plan on taking screenshots of good ideas from this site and matching it with potential layout combinations based on the prototypes I come up with.
- https://beckelectriccompany.com/
- Effective franchise look
- Liked staggering side layouts
- Come up with service plans
- https://4starelectric.com/
- Menu shadows creating the impression of layering
- Easy access cta (ex: Book Now & Phone on header)
- https://www.mistersparky.com/
- Franchise approach with commercial appeal running ads
- Adding overlapping imagery outside of circles and/or explore the use of sliders to highlight a type of service immediately
- Create an area where people can explore deeper possibly on topics with icons
- https://servicechampions.com/
- Company sending out mailers with deals (heavy on advertising)
- Menu stays on top, easy access on dropdowns
- https://www.pennaelectric.com/
- https://www.hallelectrical.ca/
- Like the transparent menu and movement of background behind header
- Discussed the higher-end clients / market approach (less about cost and more about showcasing a lifestyle
- https://www.rogerselectric.com/
- This company presents a large scale business image / corporate look which might be completely opposite the approach for smaller client setups
- The big background image on the front could be an option with light colored menus on the front
- https://www.caseyselectric.com/
- BAD Pretty basic, simple, straight to the point, talks too much, not enough CTA
- https://atkinselectricga.com/
- https://www.ecmpeco.com/
- Company that uses the website just to have a corporate site but shows an example of a larger company and NOT advertising
- https://accurateelectricplumbingheatingandair.com/
- Franchise look especially with the use of “real family” photos
- Has high ranking on SEO
- https://www.coreplumbingsd.com/
- Has a CRM built-in with their website (Housecall Pro)
- CTA connects directly to the CRM (not a bad idea)
- https://brco.com
- Big background image on the front
- Menu falls down from top and stays above
- Use of background images as part of presentation
- Create a layout/design based the balance between good layouts
- https://brunoselectric.com/
- http://www.glendoraelectricalcontractor.com/
- Domain name carries SEO weight
- https://harrison-electric.com/
- Looks like a cheap catalog ad, not pretty but very familiar
- https://kolbelectric.com/
- https://www.lighthouseelectric.com/
- Not a huge fan of big menu, an overlay menu for effect
- Other Notes:
- Not too much data stuffing on the homepage, probably focus more on effective grouping of content and CTA approach
- Check how much these sites rank and try to beat the local competitors, local searches and getting calls and jobs
- Setup the Housecall Pro (or CRM of choice) to accommodate the lead generation & data collection
- Use a lot of real “own” photos, videos and media and incorporate it into the website
- Make those credentials interesting regarding vendor links to be more useful, less clutter
- If we’re gonna show attribution to sponsors, it has to be relevant towards an approach
- Debate whether to look large and corporate vs appealing more to small accounts (residential, small business). We don’t necessarily want a “portfolio piece”.
Possible Plugins
Even though I want to code everything from scratch as much as possible – it’s never practical nor realistic. The following are potential plugins I would potentially use for complex layout scenarios (ex: mega menus, galleries, etc)
- Max Mega Menu or WP Mega Menu if there is a need for ridiculously too much menu data
- Smart Slider for interactive topic specific sliders
- WP Modula Gallery for large scale photo galleries
Site Outline (General Idea)
- Introduction to APC
- Overview of the company, mission statement, core values, and unique selling proposition.
- CTA: ‘Learn More About Us’
- Residential Electrical Services
- Custom Lighting
- EV Charging Stations
- Solar Battery Systems
- Service Upgrades
- Smart Home Automation
- Troubleshooting & Maintenance
- CTA: ‘Explore Residential Services’
- Commercial Electrical Services
- New Construction & Retrofit/T.I.
- Energy Efficiency Audits
- Insurance-Based Services
- CTA: ‘Explore Commercial Services’
- Inspection Services
- APC Subscription Services
- Proactive/Reactive Insurance Services
- CTA: ‘Schedule an Inspection’
- System Integration Services
- Property Management Solutions
- High-End Residential Solutions
- Commercial/B2B Integrations
- CTA: ‘Discover System Integration Solutions’
- Green Energy Solutions
- Carbon Mindful Solutions
- Energy Efficiency Audits
- CTA: ‘Go Green with APC’
- Showcase successful residential, commercial, and green energy projects.
- CTA: ‘See Our Work’
- Client reviews and testimonials reflecting APC’s commitment to quality and customer satisfaction.
- CTA: ‘Read More Reviews’
- Blog/Articles
- FAQs
- Guides & Tips
- Energy Saving Calculator
- CTA: ‘Get Educated’
- Contact Form
- Office Locations
- Phone & Email Contact Information
- Social Media Links
- CTA: ‘Get In Touch’