Affino’s revolutionary DIY design implementation engine now boasts 72 widgets and a much improved Main Menu navigation system
In the visual above, you can see a stylized version of the Design Centre grid (Design Object) with each of the 72 widget icons indicated. Affino’s Design Widgets are named Design Elements and exist in 10 categories - Community, Design, eCommerce, Lists, Media, Navigation, Prime Content, Promotion, Stucture and TV. When you assign a Design Element to a Cell you can additionally define styling properties, in terms of font, links, image formatting etc. by way of Design Styles, and panel / framework styling by way of Design Menus.
Each Design Element can have up to 100 different settings, including User and Topic profiling for dynamic display. Some Design Elements like ’Prime Content’ call upon the display properties and settings of the 40 or so different Affino Channel types - pulling through Forums, Media Libraries and infinite Standard content variations etc.. Design Elements are assigned in Grid-like Cell structures called Design Objects - where cells can be expanded as well as joined together to suit different design requirements; several Design Objects are typically required to produce a single Website Page or Screen.
Once you have built up / implemented your 2 or 3 core Design Layouts, which we call ’Design Skins’ (A Skin is made up of several Design Objects typically), Affino really comes into its own allowing you to quickly copy and adapt component Design Objects - by using ’Smart Copy’ to create cleverly pre-embedded copies - for the infinite variations you might need for your site.
A recent innovation is the Display-side Design Edit, which allows you to Edit the properties and settings of all your Design Element Cells from the display-side of your website. A red keyline outlines the area you are editing, and you make changes in full view of your live website. The power of Affino Design Centre needs to be witnessed first-hand; it has always been revolutionary, now more than ever.
Here follows an overview of some of the key components / elements of Affino’s Design Centre:
close window
Design Styling
Wherever you have dynamic content in terms of database delivered text and images, you can style this content by way of Design Styles and Form Styles, as well as encapsuale the majority within a textured frame or panel - a Design Menu:
Design Style - As pictured, this defines the key content colour palette, in terms of outline and table border colours, text and link colours, key action icons and even image size limits
Design Menu - Design Menus are used to frame and compartmentalise certain content, such as Highlights Listing and Related Content
Form Style - The Form Style controls the look and feel of all Forms-based content, Dynamic Forms, Login, Registration, Comments and Ratings and similar entry field type content
close window
Community
The various Community Design Elements connect with the site users and encourage participation in the site's numerous social networking and communications activities:
Blog Highlights - Filter out specific Blog content, or just display latest Blogs to stimulate participation in the Community
Community Tools - An iconographic links and functions menu leading to key Affino Community features
Login - A configurable mini login which can be placed anywhwere on the interface
Member Highlights - An alternative to Who's online for listing site members / recent visitors
Message Board Highlights - Display list of latest Message Board posts to stimulate participation
Micro Blog - Affino's integrated version of Twitter as pictured above - you set the limits, your users post whatever!
My Blog Archive - Additional Blog menu which breaks down individual User's blogs by Year and Month
Personal Tools - A dynamic text-based menu which lists out links to key Personal profiles, as well as latest uploaded content
Poll - The Design Element Poll gives a greater degree of styling than the Content / System based source Poll which appears in Prime Content
Welcome - A simple, dynamic page prompt which welcomes users to the site and encourages them to Login
Who's Online - A highly adaptable element which allows you to select for listing / display - Active Users, Recently Logged-in / out Users and combinations of both - typicall used as either 'Who's Online' or 'Recent Visitors'
close window
Design
The Design x 2 Elements here are the individual Object Grids composed of the various widgets, as well as numerous custom scripts for bespoke functionality and styling, or else Design Widgets which have yet to be made into official Design Elements, such as the Forum Highlights Script:
Design Object - Layout Grids composed of multiple Design Cells which have various Design Elements and styling properties assigned to them; a full screen layout is typically made up of 5 or so Design Objects embedded and combined together
Design Script - Script element for rendering any kind of custom functionality - could be custom layout, small widget, even a full-scale bespoke application in some cases
close window
eCommerce
Beyond the Product / Catalogue Listing, Checkout and My Account Channel combinations, several eCommerce elements are required to make online shopping work; these include the pop-up and dynamic Shopping Baskets - as pictured:
Affiliate Commerce Placement - Little used in current Affino sites, this functionality allows you to embed 3rd party / external catalogues for dynamic, related display within standard website content
Currency Selector - A simple, outlined text-based Currency Selector to change Store Currency
Recommended Products - An evolution of the Carousel - automatically displays related category Products based on Topic Keywords, as well as 'Customers who bought this also bought ...'
Related Products - A second evolution of the Carousel - displays manually related Products
Shopping Basket - Affino's dynamic Shopping Basket exists in 3 configurable formats - Maxi, Mini and Micro depending on space available and depth of functionality required
Wishlist - A pop-up panel which confirms Wishlist selection and lists links to 'Wishlist' or 'Add to Basket'
close window
Lists
The mainstay of Content Highlights are the various listing devices that allow you to pull through standard content in various display formats for Highlighted Panel display:
Carousel - Auto or manually scrolling in Horizontal or Vertical mode with numerous settings to include / exclude labels, buy buttons, pricing etc.
Detailed Contact Section - A highlights list featuring Contact content type - for mini Contact Directories etc.
Detailed Standard Section - One of the most commonly used Design Elements can feature single or multiple Sections in tabbed panel - Latest News etc. based on Section selection
Feed - Although most will tend to use Incoming Feeds function on Standard Section, more static, stand-alone RSS and Atom Feed lists can aslo be set up
Google Maps Listing - Use standard content address details to map Locations and Venues over Google Maps, based on Venues / Locations Section selection
Highlights Scroller - As pictured, a fully dynamically populated scrolling Highlights panel with both Horizontal and Vertical modes
Latest Articles - Simplified Standard Content Highlights listing based on Channel selection
Recommendations - Recommended Contacts, Content, Media and Events in listing - based on Topics and user Interest selections on Registration / Profile
Simple Events Listing - Versatile Events Listing Element which has multiple different display formats for Event Date, Title and Teaser
Standard Highlights - The most simplified of the Standard Content Highlights, rarely used, based on Channel selection
What's New - Listing Highlights which displays numerically by Section - the number of new Articles within a set time frame
close window
Media
Now encompassing Images, Video, MP3s, Documents as well as various embedded and standard multimedia formats; the Media Design elements offer various display frameworks for your Media type content:
Detailed Media Section - Very similar to the Standard Detailed Section, albeit with additional media-centric settings; this is for listed displays of Media, alongside relevant play / download icons etc.
Flash Feature Scroller - Utilising standard Images from single Media Library Section and assigning different Flash transitions with links and optional numbered navigation
Image - Straight forward image selection / display element, alongside link and alt text
Multimedia - Create a 'panel' to pull through any kind of uploaded media, as selected
Music Element - A simple On / Off music switch associated with single MP3 file - for playing background muzak on certain types of promo site
Photo Stack - A dynamic 'Polaroid' -style Image display element with manual or auto shuffle and full screen pop-up
Slide Show - Manual and auto-scrolling Slide display element with thumbnail, pop-up preview and Main display image alongside Title legend
Smart Image & Text - Affino's multi-state button element can be utilised in HTML only mode, images only or a combination of images and text as on Comrz.com
Stand Alone MP3 Player - A kind of MySpace-like MP3 player for advanced audio playback with numerous genre and category references and playlisting
Stand Alone Video Player - A stand-alone version of Affino's hybrid Video Player, picture above in Video Wall mode, 9 modes all in, including various listing modes plus onscreen tools
Video Carousel - A media carousel for several video formats, where playback occurs on the preview images
close window
Navigation
Affino has several standardised Navigation and Menu devices to aid site and content access:
A to Z - Albhabet selector - used in tandem with Affino's Keyword Directory A to Z Channel type
Browse Menu - Advanced text based browse menu which filters out options in Prime Content Area for focused selection
Calendar - Calendar Grid for Events navigation
Dropdown Menu - Simple HTML-based Dropdown Menu based on Link Section selection
Levels - Also known as Cookie-crumb-trail or rice-trail, now a standard usability essential for all websites
Main Menu - Affino's in-context navigation now comes in 3 varieties, the old-school one-step-indent Classic Menu variety, flashy Flex Accordion Menu or amazing newly introduced CSS Main Menu, as seen on this site and pictured above
Meta Information Tools - Text and Design Menu -based highlights panel displaying Meta and Keyword categories assigned to content
Page Tools - Essential on-screen user tools - Bookmark Page, Print Page, Email Page etc. in various configurations
Search - Search Box design element
close window
Prime Content
The Prime Content element is the key display vehicle for Affino's 40 Channel-based content types - all native database content appears here; Prime Content Navigation is used to encourage further in-context browsing, as is Related Content:
Prime Content - The dynamic database primary display panel for all native Channel-based content (40 varieties)
Prime Content Navigation - Section and Article Navigation within Channel to encourage further browsing / stickiness!
Prime Related Content - Related content panel for article links, references and sales collateral; also encourages further site browsing
close window
Promotion
Affino's Promotional Design Elements relate to notifying, capturing and engaging customers' attention:
Campaign Placement Area - Campaign Placement Area Slots are dynamic place holder for in-site or 3rd party ad-server banners
Count Down Timer - Frameable text-based Count Down Timer - Months, Days, Minutes, Seconds - for key events
Newsletter SignUp - Configurable Newsletter Sign-up form which can be placed anywhere on the interface
Showcase - A very clever dynamic / hybrid Flash conversion element, which converts specifically formatted Affino standard content into Flash mini promo site with animated transitions on pages and navigation
Smart Item - As pictured above, with this element you can either select and overwrite all elements of a particular Standard content Item, or else you can compose your own - with various text entry and media selectors, this can be used for almost anything
Stunt - Initially a limited ad campaign format, now utilised for custom one-off pop-up campaigns - typically centered on influencing key User activity such as post initial registration or after first login
Tips - Page-refreshing or automatically and manually scrolling Thumbnail, Title, Teaser display - used for highlights and announcement purposes and populate from Content Section with optional click-through links
close window
Structure
Used multiple amount of times in every Affino site implementation, Spacers add transparent image place holders / divs which uniformly enforce specified dimensions; the custom and dynamic Text element is used for everything from Footer / Base Bar links to dynamic date stamps and Newsletter salutations (Dear John):
Spacer - Affino's transparent image / div is used to enforce specified dimensions when dealing with dynamic content - which could otherwise be slightly differently formatted by the different browsers
Text - Both custom text - in terms of static introductions and links, as well as Dynamic database-fed text such as time and date stamps, Login/Logout and salutations
NOTE - the pictured visual attempts to display both Text, and Spacers - by way of the dotted areas indicated
close window
TV
This stands aside from the Media elements above as it specifically deals with Live Internet TV - that is to say Broadcasting or Streaming, where the main 'content' is the live broadcast, and everything else is supplemental to this. Usually the TV Player is central, and other elements are bolted on and used in combination, either left, right or below the player:
Broadcast Channel Information - An extended programme listing by Broadcast Channel text panel, usually sited to right of TV Player
Electronic Programme Guide - An in-context Programme Guide (What's on now and next) for single Channel designation, usually sited to right of TV Player
Player - The Central TV Player and main Broadcast / Streaming display panel
Player Community Menu - Related Community options panel which pops up from the Community button of the Player Menu
Player Control - Additional Play / Pause, Volume, Full Screen and Pop-up buttons, not suitable for every Broadcast type; sits below or to right of player
Player Menu - Additional Menu bar which typically sits to left or below main TV Player, has various functions popping up from 4 designated buttons - Services, Video-on-Demand, Programme Guide and Community features
Player Services Menu - Related Commercial Services options panel which pops up from the Services button of the Player Menu
Player Video Browser - A small format horizontally scrolling video thumbnails panel which usually sits underneath the main TV Player
Programme Listing Highlights - A Highlights Listing for displaying Now and Next programs alongside standard website content
VOD Barker - A larger format vertically scrolling video thumbnail with details panel which usually sits to the right of the main TV Player
NOTE - that most of the Video functionality here has been superceded by the newer Affino Standalone Video Player under Media
