This landing page design is elegant and contemporary, while still remaining approachable and friendly. This dramatic design is easy on the eyes and will appeal to a wide variety of people.
I have grandfathered in your colours of black and yellow, but I have softened the yellow slightly for a less jarring and more refined look. I have also introduced a beige as the base colour. This has brightened up the whole look, but it is still keeping a sharp edge with the black accents.
I have used a modern and clean sans-serif font throughout the design for a uniform look. This font is web safe and will experience no issues rendering across platforms and browsers.
This is a reactive design. What this means is as the screen gets larger or smaller, the website will adjust to that size so that the content is both easier to navigate and more aesthetically pleasing on all platforms from laptops to cell phones.
My goal was to create a landing page that was bold and engaging, and I believe that this screen-filling scale does the job. The desktop design is what will appear on resolutions larger than 1024 x 768. The elements will become larger and more spread out depending on the specific size of the screen. Shown below is what the design would look like on a 1920 x 1080 screen.
jQuery is one of the most powerful ways to communicate a message. This simple slide show immediately establishes all that Ambassador encompasses. Unlike Flash, jQuery works across all platforms.
The top of the website follows web standards. Ambassador's logo is right at the top, immediately establishing that this is their corporate website. The navigation is simple and elegant, creating an almost paper, letter-head like feel for the design. The navigation also features an advanced CSS drop down menu (more on this below).
With a drop down menu, all the content on a website is never be more than a couple of clicks away, creating an smoother navigation for users. This is the menu for the desktop version of the website, the tablet and mobile versions has a different version that better suits a touch interface.
One of the main purposes of any landing page is to direct your users where to go next. That is why I have included 4 Actionable Item buttons directly below the jQuery. These buttons are shortcuts to the areas of the website Ambassador's clients will most likely want to explore.
Overall the design remains very similar to the desktop version, except that the main navigation collapses in to a mobile friendly version (more on that below) and instead of having one row of actionable items, it collapses to 2 so that they are still easy to see the text and click on even at the smaller size.
The mobile design also displays perfectly whether the device is held vertically or horizontally. The mobile layout shrinks down to one column so that, once again, all the content remains big enough and accessible even at the much smaller screen size.
Traditional navigations used on websites are not suitable for touch interfaces. Therefore when the website becomes smaller than 1024 x 768, the menu will collapse in to a button. When this button is pressed the menu will expand out.