I am looking for a semi-mockup of parts of 2 websites merged into a single design. I don’t believe it should be too complicated for an experienced CSS and JS coder. I just want something that’s responsive, dynamic and visual. The website would need to be optimized for desktop, tablets and mobile.
5 basic principles behind the pages are:
1. Fully responsive, immersive design
2. Longer, scrolling pages (less clicking more scrolling)
3. Full screen graphics & large typography
4. Simplification – removal of clutter
5. Easy editing & scalable
Here are some examples of what I’m trying to achieve philosophically: http://blog.kurtosys.com/5-effective-web-design-trends-for-investment-management-websites/
1. I would like the index page to have the same feel as http://www.russell.com/ca/default.aspx
• Basically, large fade in fade out images that are clickable and bring to other sections
• Simple top menu with child section that are responsive like Bloomberg website described in the next point
2. I would like the menubar on top to have child menus that develop like http://www.bloomberg.com/professional/
• Basically, when we would mouseover a top menubar button, the full screen would be overlaid by a transparent white background and the child sections would show quickly and dynamically up on mouseovers.
3. Probably the most important part of it all would be this point, I would like the overall look of the content of the pages to be like https://am.jpmorgan.com/us/en/asset-management/gim/adv/products/d/jpmorgan-core-plus-bond-fund-a-4812c0811.
• The content part of that page would essentially be a full mockup.
• The sub-menubar would scroll down across the page and stay on top while if someone clicks on one of the sub-menubar buttons it just scrolls down to a section of the page.
• I want exactly the same sub-menubar buttons as the ones in the jpmorgan page linked as the product that I’m trying to build will be somewhat similar to theirs and I have to show the same information.
• I want the content sections to be split similarly to their page and be scattered with small sections of text and charts (inforgraphics) to show data.
4. I can help with some of the graphics work in illustrator and photoshop, you would simply need to tell me what dimensions you would need the images to be to fit well within the frame of the website’s part we’re trying to mock.
5. The sitemap sections would look like the following:
• Philosophy and Process
• Executive Biographies
o Nymbus Canadian Core Bond Fund
• Nymbus Next Generation
• Training Program
• Career Opportunities
Insights & Research
• White Papers
• Customer Support
• Request Information
PLEASE LOOK A THE ATTACHED WORD DOCUMENT FOR THE DETAILS OF THE MOCKUP PROJECT.