S1L Site
Structure
The Synergy One Lending rebuild will follow the Atomic Design processes as published in Brad Frost’s ebook: Atomic Design.
The Process
The Atomic Design Methodology.
This process includes build out of a system based on Atoms, Molecules, and Organisms. When structured together, they will build out completed templates. These templates have preset goals (Video call to action, Text call to action, etc.) where the content can easily be switched out to have a completed page.
This methodology will be followed properly site wide. This methodology will be properly documented for newly hired S1L designers and developers to easily integrate into the design system that we have built. A web based S!L branding book, of sorts.
Atoms
Typography, Colors, Labels, Inputs and Buttons.
These are the smallest elements that a website uses to create a final page. Each has been accurately adjusted to incorporate the highest levels of sensibility.
Molecules
Menu Navs, Search Field, Menu Navs
In interfaces, molecules are relatively simple groups of UI elements functioning together as a unit. Combined groups of atoms that carry out an objective function. Such as a form, a call to action button box, or navigation menu.
Organisms
Header Nav, Search Field, CTA Box etc.
Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. They can consist of similar or different molecule types, to create their own unique properties and functionality.
Templates
Header Nav, Search Field, CTA Box etc.
Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. An important characteristic of templates is that they focus on the page’s underlying content structure rather than the page’s final content. By defining a page’s skeleton we’re able to create a system that can account for a variety of dynamic content, all while providing needed guardrails for the types of content that populate certain design patterns.
Pages
The completed design by page.
Pages are specific instances of templates that show what a UI looks like with real representative content in place. When the mission of the page, and required elements that finished the desired objective have all been combined. This finished page will have system designed consistency that will create a superb overall brand feeling.
SEO Integration
Best practices for SEO site implementation
Google has many features for how our pages appear on Google. There are many features we could implement into each page, to make sure that our pages appear higher in the ranks and clearer in messaging.
Semantic Html
Google searches websites with an algorithm that finds the most relevant information for a person searching for information. Semantic tags make it clear to the browser what the meaning of a page and its content is. That clarity is also communicated with search engines, ensuring that the right pages are delivered for the right queries.
An important principle in web design is the idea of using HTML elements to indicate what they actually are, rather than how they may appear in the browser by default. This is known as using semantic HTML to clearly show search engines what each part of the site is and what that part does or conveys.
All pages in S1L will be coded semantically. Making the bridge from the search engine much more clear and easy.
Social Url Posts
Every website contains Social Media specific meta data that contains how the images, Titles, and Content Snippets appear when the url is pasted into a post. For facebook, theres a facebook card which a certain aspect ratio (rectangular dimension). For Instagram and Twitter Cards a different aspect ratio (square) is needed to display properly in a post. All of these images can be easily input into the WordPress editor with a few simple clicks and dragging and dropping the images into the editor.
In addition all the text content can be easily copied and edited into field as well. This makes it super easy to make sure all the social content is displayed properly. Landing pages can be put into social media post, and appear professionally done. This will create more traffic to the Landing pages, which will then lead to higher rates of conversion on the Landing pages.
Last but not least, this meta data wikll also appear in Google chat, Teams chat, and Apple SMS chat. So text the pages to a client, and it’ll give a higher sense of professionalism.
See the images in the Open Graph Section below to the right to get a visual representation of the results.
Button Styles
We’ve designed the buttons to have 3 different shape styles: Rounded Corners, Square Corners, and Circular Corners as well as 3 different size scales: Small, Medium, and Large.
The buttons have been designed to be clear on any background color. We’ve used a Thin 1px White border for dark backgrounds or a Black border for light borders. This will add an increased contrast ratio, and give the button an extra pop on the screen. The hover micro-interaction gives a comforting and gentle push forward that makes the user feel like he’s moving ahead.
All the buttons are responsive, meaning the size gets smaller depending on the device being used.
Social Links
Display of s1L web pages on social sites
When social media posts of a webpage appear on a social site, it looks for data to display what the content on the page is. Every page on S1L.com will have proper images for each platform, as well as proper headings and meta descriptions coded into each page.