Agency Portfolio Technical Specifications

alt-featured

An example of technical specifications to be sent out alongside *.psd files for an agency portfolio website.

This example is more geared towards guiding the coders through a painless implementation of the design.

Altadar Website Technical Specifications

Development Site - http://new.altadar.com/

 

Brief:

The entire website will be built on a Coda slider script

http://jqueryfordesigners.com/coda-slider-effect/

 

  • The Left and Right keyboard buttons will activate the Coda slider.  This is solved here: http://forum.jquery.com/topic/jquery-cycle-with-keyboard-scroll
  • When the Coda slider is activated, the “Altadar > BG > Floor” layer will also slide in the same direction as the content.
  • The “Altadar > BG” group will remain static when the Coda slider is activated.
  • The “Altadar > Logo” group at the top right of the page will remain static when the Coda slider is activated.
  • The “Altadar > Footer” group, also separate from the Coda slider, should be docked at the bottom of the user’s browser and always 100% visible so that they can access the Menu.
  • Coda Sitemap: Homepage > Altadar. > Solutions. > Portfolio. > Process. > Contact.

 

In order to activate the menu, a user will hover over the “A Logo” in the footer for 1 second. The logo will invert to the Gray version found at: “Altadar > Menu > Logo”.  The menu will then slide upwards and the background will fade to 90% black opacity to bring the menu into focus.

*Activate “Altadar > Menu” to see this group in the homepage.psd

 

The Social Networking ribbons should be an Accordion Content Rotator.  When a user clicks any of the icons, it will display content to the direct right of that ribbon.

http://demo.tutorialzine.com/2009/12/colorful-content-accordion-css-jquery/demo.html

 

  • The Twitter Ribbon will display Altadar’s most recent tweet. http://coda.co.za/blog/2008/10/26/jquery-plugin-for-twitter
  • The Facebook Ribbon will display the Facebook Like Button http://developers.facebook.com/docs/reference/plugins/like/
  • The Blog Ribbon will display the most recent blog post.

 

If Necessary) If the website load is too heavy, please apply this preloader script:

http://www.jqueryin.com/projects/spinner-jquery-preloader-plugin/#about

 

The Homepage will have a series of animations demonstrating the functionality of the website and animating a couple of objects such as headlines and links.

 

http://421labs.com/clients/altadar/index.html

1) After the page loads, the website will appear with the “Altadar > Menu” group in its expanded view.  After a 3 second pause, the menu will slide back to its contracted state and the 90% opaque background will fade to 0%. The logo will revert to its normal state. You can view this by hiding the “Altadar > Menu” group.

 

http://421labs.com/clients/altadar/index-2.html

2) The user will arrive to an empty Homepage.  The next sequence will display 2 “Altadar > Instructions”.

 

http://421labs.com/clients/altadar/index-2a.html

3) Fade in the “Altadar > Instructions > Step 1″ group using the Coda Bubble animation. Display for 3 seconds and have it disappear.

http://jqueryfordesigners.com/demo/coda-bubble.html

 

http://421labs.com/clients/altadar/index-2b.html

4) Fade in the “Altadar > Instructions > Step 2″ group using the Coda Bubble animation. Display for 3 seconds and have it disappear

http://jqueryfordesigners.com/demo/coda-bubble.html

 

http://421labs.com/clients/altadar/index-3.html

5) Fade in the “Altadar > Homepage. > Headline”. Then fade in the “Altadar > Homepage. > Work Button”

 

http://421labs.com/clients/altadar/about-1.html

6) If a user presses Right key (or browses with the menu to any section within the first category: “Altadar.”), the Coda slider will slide to the right one full page. The artwork will slide from the right side of the screen all the way to through the left side as demonstrated in the mockup.

 

http://421labs.com/clients/altadar/about-2.html

7) Fade in the “Altadar > Altadar.” group.

 

  • From any of the category pages with Subpages, a user may user the Up and Down arrows to browse between the pages.  The animation from page to page will be a simple FadeOut/FadeIn

 

http://421labs.com/clients/altadar/about-3.html

8) Fade in the “Altadar > Altadar. > Jobs” group. The SubMenu will adjust to show the correct Active state at the same time.

 

http://421labs.com/clients/altadar/solutions-1.html

9) Slide one full page to the right to the “Altadar > Solutions.” group.

 

  • This group does not have any Artwork behind it.
  • The Web Design, Ecommerce, Brand Identity, Mobile Apps, and Print & Graphics categories will have the “Altadar > Solutions. > Submenu > Portfolio Button” group to the right and will link directly to the corresponding section in the Portfolio.

 

http://421labs.com/clients/altadar/solutions-2.html

10) Fade in the “Altadar > Solutions. > Mobile Apps” group.

 

http://421labs.com/clients/altadar/work-1.html

11) Slide one full page to the right to the “Altadar > Portfolio.” group.

 

When a user arrives to this slide, the screen will begin to display the instructions one by one.

 

http://421labs.com/clients/altadar/work-2.html

12) Fade in the “Altadar > Portfolio > Instructions > Step 1″ group using the Coda Bubble animation. Display for 3 seconds and have it disappear

http://jqueryfordesigners.com/demo/coda-bubble.html

 

http://421labs.com/clients/altadar/work-3.html

12) Fade in the “Altadar > Portfolio > Instructions > Step 2″ group using the Coda Bubble animation. Display for 3 seconds and have it disappear

http://jqueryfordesigners.com/demo/coda-bubble.html

 

http://421labs.com/clients/altadar/work-4.html

13) Fade in the first work. Slightly delayed, Slide the title & icon of the piece upwards from behind the monitor.

 

• The Portfolio is made up of 4 categories.

  • Each category has any # of Projects within it.
  • Each Project is allowed to have any # of screenshots.
  • A user may user the Up and Down arrows to browse between the Projects in the current category.  The animation from work to work will be a simple FadeOut/FadeIn.
  • If a user clicks anywhere in the monitor, it will use the Cycle plugin and show more screenshots within that Project http://jquery.malsup.com/cycle/

 

http://421labs.com/clients/altadar/process-1.html

14) Slide one full page to the right to the “Altadar > Process.” group. This category will behave exactly as the previous category pages.

 

  • All of the sections to the right of the portfolio have a new color scheme (Light Blue & Gold).

 

http://421labs.com/clients/altadar/process-2.html

15) Fade in the “Altadar > Process. > Development” group.

 

http://421labs.com/clients/altadar/contact-1.html

16) Slide one full page to the right to the “Altadar > Contact.” group. This page will behave exactly as the previous category pages.

 

  • The Get Directions Button will send the user directly to Google Maps.

 

http://421labs.com/clients/altadar/contact-2.html

16) Fade in the “Altadar > Contact. > Office” group.

 

http://421labs.com/clients/altadar/contact-3.html

17) Fade out the content. Fade in the “Altadar > Contact. > Contact” group.

 

http://421labs.com/clients/altadar/contact-4.html

18) Fade out the content. Fade in the “Altadar > Contact. > Free Consultation” group.

 

  • This page is controlled by another Coda instance of the Coda slider for its steps. http://flowplayer.org/tools/demos/scrollable/wizard.html
  • Step 1 is User Information

 

http://421labs.com/clients/altadar/contact-5.html

Fade out the content. Fade in the “Altadar > Contact. > Free Consultation > Step 2″ group.

 

  • Step 2 is Project Information
  • Step 3 is Additional Comments and Submission

 

/////////////////////////////////////////////////////////////////////////////////

 

Hover States:

  • I’ve attached a Hovers.psd file that contains all the link state, hover states, down states and active states for the buttons site-wide.
  • The Menu links should hover #cd422c.
  • All the Subnavigation links Left of the Portfolio slide should be #cd422c.
  • All the Subnavigation links Right of the Portfolio slide should be #34ffff.
  • The Hover states for the text links in the Footer will just remove the Underline.

 

Header Tags :

  • All the <h2> thru <h6> tags to the Left of the Portfolio slide should be #3e5eb6.
  • All the <h2 thru <h6> tags to the Right of the Portfolio slide should be #ccad4e.

 

Share it