Current: One Column Layout Block

Inline css support working: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Suggested improvements

1. A extra column adjustment, to limit the long lines of text

If a casual reader gets tired of reading a long horizontal line, then they’re more likely to skim the left edge of the text. If an engaged reader gets tired of reading a long horizontal line, then they’re more likely to accidentally read the same line of text twice (a phenomenon known as “doubling”).

https://www.smashingmagazine.com/2014/09/balancing-line-length-font-size-responsive-web-design/

Additional: One Column Layout Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

col-2 col-8 col-2


Consistency Fixes

Background colour settings
Padding adjustment support


Current: Two Columns Layout Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


The Two Columns Layout is very text heavy with a very narrow gutter, this section takes effect to read. I would suggest abandoning this section and moving to a 3 col layout which is easer to read. This section should also have the ability to add more columns to give flexibility. But this 3-col layout can me design how we want via some copy and paste html.

Additional: Advantages

Accurate
decisions


Leveraging large volumes of data from multiple sources, including non-financial information.

Improve data management and quality


Tools for extracting, analysing, and transforming data into meaningful insights.

Stop relying on spreadsheets


A central data repository allows for controlled collaboration and visibility to minimise errors and mitigate risk.

Accurate
decisions


Leveraging large volumes of data from multiple sources, including non-financial information.

Improve data management and quality


Tools for extracting, analysing, and transforming data into meaningful insights.

Consistency Fixes

Background colour settings
Padding adjustment support


Full Width Banner Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

CTA

The Full Width Banner Block does not have as much impact as it could due to small font size. Also it should have a colour overlay to help adjust the contrast of the text to the background image. Again I also think the text runs to long and the images could work a little harder with out pulling focus form the copy. We could also use a white out version, so it helps the flow of page. But think this could also maybe overcomplex and simple bright blue CTA would work.

Consistency Fixes

Background colour overlay settings
Padding adjustment support

Full Width Banner Block

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

CTA


Full Size CTA Box Block | img left and right

I think these sections work well, and flow is fine. But some extra control over col sizing and padding would be a nice to have good.

Consistency Fixes

Background colour overlay settings
Padding adjustment support

MRI Software Block Overview - Full Size CTA Box Block | img left

Full Size CTA Box Block | img left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

employee sign in

Full Size CTA Box Block | img right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.


Advantages New

The alignment of this section is off, above is col-6 | col-6, where this is col-7 | col-3 with a offset of 1, this makes the image very small and inconstant along with the text not lining up which interrupts the follow of the page, . In most use cases this is used in conjunction with the Full Size CTA Box Block.

I’m not 100% sure the padding section is working for the block, as its set to 0 but showing as; padding: 80px 0 30px.

Consistency Fixes

Background colour overlay settings
Padding adjustment support

MRI Software Block Overview - Full Size CTA Box Block | img left

Full Size CTA Box Block | img left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

employee sign in

  • Lorem ipsum dolor sit amet, consectetur adipi

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

  • Quis nostrud exercitation ullamco laboris nisi ut

    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Suggested flow updated

Full Size CTA Box Block | img left

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipi

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Quis nostrud exercitation ullamco laboris nisi ut

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Quis nostrud exercitation ullamco laboris nisi ut

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

employee sign in

Solution Boxes Block

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Solution Boxes Block Suggestions

I think the current solution box are a little to large and this leads to unneeded scrolling, I also believe the icons are a little to large and pull focus form the titles and should be moved to more secondary design elements. It would be nice to design a new more compact version of these which has a little more inject off brand colours and design flexibility.

I think this would also work nicely for features in some instances. We could have a boxed and unboxed versions, as the boxed version but used if links are needed.

Please note this image is not to scale as its jpeg.

We could go even smaller for product links.

Rollover Section Block

Rollover 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Rollover 2

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laboru

I don’t love the button down the side on a rollover due to the jump you get.

Also think we can make it a little more simple and makes the copy section more a focus and the nav a little more secondary.

New Full Width Sections to Show Product.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Accurate decisions

Leveraging large volumes of data from multiple sources, including non-financial information.

Accurate decisions

Leveraging large volumes of data from multiple sources, including non-financial information.

Accurate decisions

Leveraging large volumes of data from multiple sources, including non-financial information.

Accurate decisions

Leveraging large volumes of data from multiple sources, including non-financial information.