we need to have two page designs (homepage and content page) for our new WordPress website. This description gives you a short overview about the requirements of the homepage. It's probably already enough information for a first design draft in the qualifying round. But to get a full understanding of the requirement we suggest that you read the full briefing. The full briefing is attached as a PDF document. we have updated the briefing a little bit. All updated parts are highlighted with a light green color. there aren't many changes compared to the initial briefing.
Our WordPress theme will be based on the Woo Theme "Swatch" (http://demo.woothemes.com/swatch/). Our website will have more or less 95% the same functionality as the theme "Swatch". But the theme will be adapted in terms of design/arrangement to the winning design of this contest.
To get started please study the provided link! and then continue to read here.
The homepage needs to have the following elements (similar to the "Smart" theme):
- logo and brand claim (see attachments)
- menu (unfoldable submenus)
- search input field
- RSS button/link to subscribe to the RSS feed
- based on jQuery
- three different content types (photo 16:9, photo full content width, video 16:9 YouTube)
- photos/videos will be studio and outdoor shots
- box 1: 'our services' (custom bikes, bike restoration e-bike upgrade) or 'our mission statement' (individual, urban, stylish, high-quality, exclusive) (text and/or bullet points)
- box 2: customer feedback/testimonals (quoted text)
- box 3: our shop (small pic of our location on Google map and opening hours: Thu 18:00 to 20:30, Sat 09:00 to 13:00)
MAIN CONTENT AREA
- same elements as on the Woo theme "Swatch"
- unfoldable categories
- recent posts
- Facebook integration
--> four widgets might be too much. maybe one of these widgets could be moved to another part of the website.
- copyright notice (copyright by XECC gmbh, switzerland 2012)
- links to 'disclaimer', 'legal notice', 'terms & conditions'
- teaser bubble for texts like (design your urban ride, ride your dream, check our year-end sale, etc.). it must be possible to show/hide the bubble as it may or may not be needed from time to time. overlayering one of the above elements is probably a solution, e.g. slider, etc.
as mentioned above it's absolutely fine to design only the homepage for the qualifying round. for the final round we require both pages with all details as described in the PDF briefing.
UPDATE (26/05/2012) for the FINAL ROUND
To win the contest you need to have the best design AND completely provide the second page-type (content page). The following text is the summary of the briefing that can be read in the attached PDF (see attachment below). The PDF briefing wasn't changed since the beginning of the this webdesign contest. This text gives you a short overview of the requirements and can also be used as a checklist. Nevertheless, please read the PDF briefing for full details.
IMPORTANT: your design MUST fulfill ALL these requirements to be an eligible winner of the contest!!!
ELEMENTS that remain the SAME as on the HOMEPAGE are:
- WIDGET AREA
The MAIN AREA is between the HEADER and the WIDGET AREA. Please check http://demo.woothemes.com/swatch/blog/ as reference.
THE MAIN AREA is vertically separated into the
- CONTENT AREA and
- SIDE BAR
- remains the same for all pages (except the homepage, static content, photo gallery overview)
- the required elements in the SIDE BAR are
1) tabbed blog info box with the tabs "Popular", "Latest", "Comments" and "Tags" (see link above as reference)
2) event box (just a text box where we manually add upcoming events with a date and a corresponding link, see PDF briefing for details)
3) link box (of our favorite brands and befriended companies)
4) advertisement box (not used at the beginning)
5) other ideas are welcome!
this area will show the main content. there are 4 different content types
1) BLOG CONTENT consists of the following elements
- posting date/time
- selected categorIES
- selected tagS
- starting post image/video (see below)
- text (poss. enriched with image thumbnails, see below)
- social media sharing (Facebook, Twitter, G+, Pinterest)
- navigation to next or previous post
- nested comment section (first tab) and comment input (second tab)
- navigation to previous and next blog
2) STATIC CONTENT is the same as BLOG CONTENT but only with the following elements:
- starting post image
it is probably best not to show the SIDE BAR for STATIC CONTENT. but that's up to the designer
3) BLOG OVERVIEW / SEARCH RESULTS
- check the following link: http://demo.woothemes.com/swatch/blog/ this is the reference. exactly like that. excerpt for 10 blog entries
- only addition: if there are more than 10 entries there must be a page navigation at the bottom
4) PHOTO GALLERY OVERVIEW
- check the following link: http://demo.woothemes.com/swatch/portfolio/ this is the reference. exactly like that. 9 galleries per page
- only addition: if there are more than 9 galleries there must be page navigation at the bottom.
IMPORTANT: if the user clicks on one gallery the first image/video of this gallery opens in a lightbox. thumbnails of the other photos in the same gallery are shown at the bottom. navigation to the right an to the left are also shown. the user can share the photo to Facebook, Twitter, G1 and Pinterest. some pictures will have a description over-layering the picture.
ADDITIONAL information for "starting post image/video" and "text" (see above)our main focus is to publish photos (and some videos). we don't want to write long text postings. every post will normally start with a photo (or video). the starting photo is followed by some text. if necessary we want to add more photos into the text as thumbnails. if the user clicks on the starting post image or on one of the thumbnails a lightbox opens. the user can then navigate left and right to see all photos/videos (starting post image and thumbnails) of this specific blog post. he can also share the photos/videos to Facebook, Twitter, G1 and Pinterest.
IMPORTANT: please define the design of all required text elements as bullet points, tables, headlines 1 - 6, quotes, etc. the reference is this: http://phomedia.transparentideas.com/typography/
- to show the unfoldable top menu (sub-menu and sub-sub-menu)
- to show the unfoldable category widget in the widget area (only one sub-category)
- no capitalization of words. exceptions: XECC, XECC GmbH, HOME, or if you use all capital letters in titles or subtitles.