PSD to XHTML Phase 1

engineerbeetsAI and Robotics

Nov 15, 2013 (3 years and 9 months ago)

99 views



PSD to XHTML


Phase 1

31
st

May 2011

1. Introduction to Siansplan

................................
................................
................................
................................
..........................

3

1.1

Siansplan Overview

................................
................................
................................
................................
..........................

3

2. Summary of the brief

................................
................................
................................
................................
................................
..

3

2.2

What will be provided you with

................................
................................
................................
................................

3

2.2.1

Designs

................................
................................
................................
................................
................................
..........

3

Detailed requirements

................................
................................
................................
................................
................................
.....

4

General layouts

................................
................................
................................
................................
................................
...............

4

1. Headers

................................
................................
................................
................................
................................
.....................

4

2. Navigation menu

................................
................................
................................
................................
................................
.

5

3. Footers

................................
................................
................................
................................
................................
......................

5

3. General Background images

................................
................................
................................
................................
..........

5

Individual page layout


breakdown of required functions

................................
................................
.....................

5

Homepage


W1 (non
-
registered) and W2 (registered but non
-
paying)

................................
....................

5

Homepage


W3 (Registered and paying)

................................
................................
................................
...................

6

Recipe search


W4A and W4B

................................
................................
................................
................................
.........

7

Individual recipe page (W6)

................................
................................
................................
................................
................

8

Meal plan page (W5A)

................................
................................
................................
................................
...........................

9

Shopping list (W7)

................................
................................
................................
................................
................................
....

9

My Cookbook
-

recipes (W8A)

................................
................................
................................
................................
..........

9

My Cookbook


My Meal Plans (W8B)

................................
................................
................................
..........................

9

My Cookbook


My Account (W8C)

................................
................................
................................
............................

10

Pricing page (W9)

................................
................................
................................
................................
................................
..

10

Purchase page (W10B)

................................
................................
................................
................................
........................

10




1. Introduction to

Siansplan

1.1

Siansplan Overview

We are a young, ambitious company who look to be a market
-
catalyst & leader, in the area of meal
planning. The meal planning system h
as been devised by Sian

and

it has been tested and proven

offline
. We now want to

bring the concept online, and

complete development of our website

to

get
it to market by the end of June.

2. Summary of the brief

We are looking to convert our PSD templates
into XHTML and CSS to the best possible standard.
The conversion will require the following details to also be functional so that the templates are
ready to be integrated into our Umbraco (.net based CMS) by our developer;



jQuery elements



Font replacement



User Interactions (feedback/confirmation messages, lightbox popups etc)
-

anything that
may be displayed while the user interacts with that template



Form validation messages



Any generic styles e.g. content, forms, pull quotes, images etc not represented in

the
current templates



Print stylesheets



Error messages and pages



SEO friendly markup

We require

that all code will be best
-
practice semantic structure, no frameworks, maximum
separation of presentation mark
-
up and interaction code etc
. It goes without say
ing that the final
XHTML is validated.

2.2

What will be provided you with

2.2.1

Designs

The complete designs (provided in layered .pngs and/or .psd files) for all of the pages required will
be provided. These completed pages are;

a)

Homepage [x3]

1.

Homepage
-

non
-
registered, non
-
payin
g [W1]

2.

Homepage
-

r
egistered, non
-
paying [W2]

3.

Homepage


paying

[W3]

b)

Meal
-
plan page

c)

Individual recipe page

d)

Recipe s
earch

page

e)

Add a recipe page

f)

My Cookbook Page

1.

My Recipes

2.

My Menu Plans

3.

My Account

g)

Registration Page [x2]

1.

Free (pop
-
u
p)

2.

Paying

h)

Pricing page

3.
Detailed requirements

3.1

General layouts

3.1.
1.

Headers

a.
Non
-
registered header

(As seen in all mock
-
ups)

The Sign
-
in button should be a jQuery pop
-
up with the following parameters:



Username



Password



Remember me checkbox and fu
nctionality



Submit button



Register for an account link

The ‘join us’ button has a jQuery pop
-
up as seen in
W10A. If the user chooses to register using one
of the social media providers then they should then be provided with pop
-
up W10A2.

b.
Registered
header

Sign
-
in converts to ‘my account’ and ‘join us’ converts to ‘upgrade’

3.1.
2.

Navigation menu

The main navigation menu incorporates a drop
-
down sub
-
menu with the date to the right hand
side. This sub
-
menu should stay active when the main menu item is

active.

3
.1.3
.

Footer
s

a. Non
-
registered footer (
eg. W1
)

The footer contains a contact form and a newsletter application form. These will need form
validation messages.

Contact form;

-

please supply your name

-

please supply a valid email address

-

please

add a message

Newsletter;

-

please supply your name

-

please supply a valid email address

b. Registered footer (eg. W3)

The registered footer is very simple


just links.

3
.1.4
.

General Background images

There are five background images that will rotate on
refresh. These will need to be formatted
correctly.

4.0
Individual page layout


breakdown
of required func
t
i
ons

Hom
e
page


W1

(non
-
registered)

and W2

(registered but non
-
paying)

W1 and W2 are basically the same, bar one module


the ‘example recipe
module’ in W1 is
replaced by the ‘most popular recipes’ module in W2.

1.

Main Feature Image Slider

Requir
es a caption. Possible solution
;



http://slidesjs.com/

http://slidesjs.com/examples/images
-
with
-
captions/

2.

Vimeo Video

3.

Screenprint examples
-

Lightbox

A nice friendly image lightbox

4.

Most popular recipes

This module is duplicated throughout the site with different headings. Requires the ability
to ‘add to favou
rites’, ‘add to try list’, ‘add to meal plan’ and ‘print’. The nutritional icons
are pulled in from tags. The name and image should link through to the receipt listing.

Special requirements:

Print layout

5.

Latest from the blog

Same layout as the recipe modul
e above, but without any special functions.

6.

Facebook

http://developers.facebook.com/docs/reference/plugins/like
-
box/

Facebook page: /mealplanner

Show faces


yes

Show stream


no

Show header


no

7.

Twitter

Username
-

@siansplan

This is a bespoke design, but should not be too difficult to implement.

Homepage


W3

(Registered and paying)

1.

Meal planning module

Design as XHTML and CSS
.
Non
-
functional, this module is a summary of the
current users
meal plan (shown in W5A



meal planning
). If no meal plan has been prepared, then the
module may be shaded with text saying “Meal Plan not yet created



click here to crea
te a
meal plan
”.
Days with more than one meal will have scrollable laye
rs to show the name and
image of the other recipes.

2.

This weeks recipes

Recipe layouts same as all other module, without the ability to ‘add to meal plan’
. Non
-
functional, this is a list of the current recipes in the users meal plan. The functionality to
pr
int these recipes should be in place (as per designs). If no meal plan has been prepared,
then the module may be shaded with text saying “No recipes to display as Meal Plan has
not yet been created” or something similar.

3.

What would you like to do now

Simpl
e buttons

4.

Latest news

Image and heading should link to news page

5.

Latest from blog

Exact replica of previous

Recipe search


W4A and W4B

These te
r
mplates show the search function non
-
active and active.

Requires message if no recipes have been found.

1.

Recipe

search

This is a drop
-
down div. The search results are provided in 4 separate tabs.

Checking the
green day sets that all parameters are required for search results.

The filters are as follows;



Specifically suitable for age groups



Toddlers (3
-

5)



Children

(6
-

12)



Teenagers (13
-

19)



Seniors



Cuisine



European



Asian



American



Middle eastern



African



Caribbean



Mediterranean



Diet specific



Gluten free



Diabetic



Low cholesterol



Low calorie



Dairy free



Low GI



Vegetarian



Health boosters



Brain & concentration



Growth &
development



Energy



Happy moods



Eyesight



Wellbeing



Bowls



Heart



Bones & Teeth



Skin

2.

Feature image 1

Same functionality as feature image in W1

3.

Feature image 2 (small)

Similar functionality but slightly different

4.

Recipe modules

Same as modules from W1

Individual recipe page

(W6)

This page has the following functional requirements;

-

Star rating

-

Print

-

Add to favourites

-

Add to try list

-

Add to meal plan

-

Share

-

Facebook like (the like button should pull a few lines from the recipe description)

-

Nutritional
icons (dynamic)

-

Time, budget and serving icons (dynamic)

-

Facebook comments

The images should have a set width.

Meal plan page

(W5A)

A working example of this page can be seen on request.

This page has quite a bit of functionality. It pulls the search modul
e in form the search recipes
page, however the resulting recipes must be drag and droppable into the meal planning days (top
module).


The colour code boxes are dragged and dropped in the available days.

Requires message if no recipes have been added to m
eal plan

Shopping list (W7)

Recipes in meal plan are displayed on the left hand side and the recipe ingredients on the right
hand side. The RHS has 4 tabs to display each week.

A print layout for this page is required.

Requires message if no recipes have

been added to meal plan

My Cookbook

-

recipes (W8A)

Summary of recipes without the functionality to add to favourites or add to try list. There is a new
function here where a person can ‘publish’ their recipe


this controls whether a person allows their
recipe to be published in the general site.

Also have the ability to search for recipes within each tab.

Requires message if no recipes have been found.

My Cookbook


My Meal Plans (W8B)

A persons

saved plans appear on the left hand side. On the right hand side, the meals for each day
are summarised within drop down divs. The colour corresponding to those days are the colour of
the divs. The following messages should appear for days that will have
no recipes;

Green day

There are no recipes saved here as this is a green day. On green days you search for an appropriate
recipe from ingredients that are in the fridge. Click here to search for recipes (button to recipe
search page)

For more information o
n how meal planning in colour works, click here.

White day

There are no recipes saved
here,

as this is a white day. On white days you do not cook. Enjoy your
day off!

For more information on how meal planning in colour works, click here.

My Cookbook


My
Account (W8C)

Fairly straightforward.

Pricing page (W9)

XHTML and CSS.

Purchase page (W10B)

Requires form validation messages.

Proceed button goes to the payment gateway.