xethic design specxethicification - iteration 2 (1.0)

7/27/2019 Xethic Design SpecXethicification - Iteration 2 (1.0)

1/21

Proprietary and ConfidentialXethnic LLC, Suwanee (Atlanta), Georgia

August 18, 2013

Version 1.0

Design Brief

Xethic.org

Iteration 2 PSD to Responsive HTML5

Abstract: This document describes the project details for iteration 2 of theXethnic web services design. The objective of this iteration is to convert thegraphic design files created in iteration 1 to responsive HTML5 and a standardCascaded Style Sheet to be used for the website development.


2/21


3/21

Xethnic.org Design Specification

Proprietary and Confidential Page 3 of 21

1 General Description

This is iteration 2 of a larger web development project for a new online webservice. In iteration 1, we hired a graphical designer that created the basic layoutand style for the site. This designer has provided layered PSD files, which weneed to convert to responsive HTML5 and CSS files. These pages will bedelivered to the software developer in iteration 3 and future iterations.

2 Materials Furnished by Xethnic

Xethnic will provide layered PSD files for each of the pages to be converted.

3 Page Descriptions

This section provides images of each of the pages when shown on a wide screenmonitor or laptop and descriptions of how the pages need to respond on smallerscreens.

3.1 Home Page

The following image shows the home page when viewed at larger resolutions.


4/21



Figure 1 Web Home Page

Once the page resolution gets too small to show the entire menu bar, the menuwill change as shown in the below smartphone example.


5/21



Figure 2 Mobile Home Page

The following table describes the operation of each element on the page.

No. Element Specification

1. Xethnic Logo None


6/21



2. About Open the About example page shown in Figure 8.

3. Privacy Open the About example page shown in Figure 8.

4. Volunteer Open the About example page shown in Figure 8.

5. Contact Open the About example page shown in Figure 8.

6. Login or Signout Open the Messages Page

Table 1 Home Page Elements

3.2 Messages Page

The following image shows the messages page when viewed at largerresolutions. The microblog messages are shown with example content. Pleasenote that the messages in the image below are examples. The HTML5 codeshould be designed for various message content.


7/21



Figure 3 Web Messages Page

Once the resolution gets too small to show the entire menu bar on this page, thepage should respond by:

1. First removing the Welcome Username text,2. And second removing the search edit textbox and replace it with only the

search icon



1. Xethnic logo Re-opens the page.

2. Search Text Box This element should allow the user to type text intothis box but it will not be saved or do anything.

3. Search icon None

4. Menu Drop down the menu as shown in Figure 5.

5. Logout Icon None

6. Welcome text None (Note: this is the text that says Welcome,username)

7. Edit icon (on theblog message)

None

8. Delete icon (onthe blogmessage)

None

9. Information icon(on the blogmessage)

Important Note! This icon shall be removed.Additionally, the notification message with thetext 1 Connection Request shall not beincluded.

10. Blog Button Open the rollout microblog control described inSection 3.2.1 and shown in Figure 4. Note: This isthe grey button to the left of the text box that saysEnter her simple text blog.

11. Simple Text BlogControl

This element should allow the user to type text intothis box but it will not be saved or do anything. Note:

this is the text box with the text Enter here simpletext blog.

Table 2 Messages Page Elements

3.2.1 Microblog Control Design

When the user clicks the microblog button shown in Figure 3, the rolloutmicroblog control shall be opened, as shown below.


8/21



Figure 4 Web Microblog Control

This is an example page only. When the application is developed, the content onthis page shall be created dynamically. However, the HTML5 code and styles forthis page are required.

As the page size shrinks, the page should respond as follows:

1. When there is not enough room for the Add New label, Upload Photo buttonand New Text Paragraph button, the Add New label shall disappear.

2. When there is not enough room for the Upload Photo button, Or text label,and New Text Paragraph button, they shall float left and center on the page.



1. First text control This element should allow the user to type text into


9/21



this box but it will not be saved or do anything. Note:this is the text area with the text Beautiful Flowers.

2. Picture The picture of the flowers should be shown as is. Noactions are needed.

3. Second textcontrol This element should allow the user to type text intothis box but it will not be saved or do anything. Note:this is the text area with the text Type text here.

4. Upload PhotoButton

None

5. New TextParagraphButton

None

6. Cancel Button This button should close the rollout microblog controlso that only the messages page is shown.

7. Publish Button This button should close the rollout microblog controlso that only the messages page is shown.

Table 3 Microblog Control Elements

3.2.2 Menu Design

The following image shows an example of the menu at larger resolutions.

Figure 5 Web Menu Design


10/21



On smartphone screens the menu should switch from being a popup to being arollout menu that fills the enter width of the screen, similar to a list view.

The menu shall popup when clicked (or touched on touchscreens) and containthe following items and associated actions:

No. Menu Item Item Action1. Profile Open the profile page

2. Find People Open the Find People Page

3. Connections None

4. Logout Open the Home Page

Table 4 Menu Items and Actions

3.3 Find People Page

The following image shows the find people page on a larger screen.

Figure 6 Web Find People Page



1. Xethnic logo Opens the messages page.



11/21



3. Search icon None


5. Logout Icon None

6. Welcome text None

Note: this is the text that says Welcome, username

7. All members filterbutton

This control shall toggle between All Members andConnected Members when clicked (or touched on atouchscreen). The white button with the red dot shallswitch positions each time it is clicked to indicate tothe user which filter is currently selected.

Additionally, the All Members and ConnectedMembers text shall switch from grey when not

selected to red when it is selected as shown in theexample. That is, when the switch position is on theleft, the All Members text shall be red and theConnected Members text shall be grey. When theswitch position is on the right, the All Members textshall be grey and the Connected Members textshall be red.

8. MemberHyperlinks

None.

Note: These are the red hyperlinks with text such as

Another Girl and Arnold Swartzeneggar.9. Request

ConnectionButtons

None

10. Left ArrowButton (PageLeft)

None

11. Right ArrowButton (PageRight)

None

12. Paging Button None.

Note: this is the button with 1 2 14 29 30.

Table 5 Find People Page Elements


12/21



3.4 Forms Pages

Many pages will require the user to enter information on forms. The followingimage shows the profile page as an example. The styles should be designed forgeneral form screens and not specifically for the profile page.

Figure 7 Web Form Page (Profile Page)




2. Search Text Box This element should allow the user to type text into

this box but it will not be saved or do anything.3. Search icon None


5. Logout Icon None


Note: this is the text that says Welcome, username.

7. First Name When the user clicks on this element, he should be

able to type text into the box but it will not be savedor do anything.

8. Last Name When the user clicks on this element, he should beable to type text into the box but it will not be savedor do anything.

9. Photo + Upload None


13/21



Button

10. Cancel None

11. Save Profile None

Table 6 Find People Page Elements

3.5 General Information Page

Many pages such as About, Contact, and Privacy will be simple text pageswith headers, lists, images and captions. The following image shows the Aboutpage as an example of these general information pages. This page is the onlyone that must be converted to HTML5. However, the styles shall be designedand named so that they are applicable to any of these pages.

Figure 8 Web General Information Page




14/21





3. Search icon None


5. Logout Icon None


Note: this is the text that says Welcome, username

Table 7 General Information Page Elements

4 Design Standards

The following table provides the design standards that shall be followed for thisproject.

Item Description

1. Final pages shall be pixel perfect as compared to the imagesprovided, except for modifications as noted in this document.

2. All web pages shall be developed in accordance with HTML5specifications.

3. The style sheet shall be based upon the 960 Grid System

template (http://960.gs/).4. Responsive web pages shall support easy navigation and reading

on a minimum screen size of 2.2 inches.

5. Responsive web pages shall support a minimum screenresolution of 320 x 240 pixels without horizontal scrolling.

6. Responsive web pages shall support easy navigation and readingon a maximum screen resolution of 2560 x 1440 pixels.

7. Text controls, including email, passwords, and so forth shoulduse placeholders instead of labels. Note: I realize not all

browsers support this right now but I anticipate it will be morewidely supported before the services go live.

Table 8 Design Standards

5 Project Deliverables

The following table lists the deliverables for the project.
http://960.gs/http://960.gs/http://960.gs/http://960.gs/


15/21



DeliverableNumber

Description

1. One Cascaded Style Sheet (CSS) file containing all the styles forthe site.

2. One responsive home page HTML file, including all images andsupport files as needed.

3. One responsive messages page HTML file, including all imagesand support files as needed. It shall also include the popup menu(Note: the menu is the same for all of the pages except the homepage and general information page, which do not have a popupmenu).

4. One responsive find people page HTML file, including all imagesand support files as needed. It shall also include the popup menu(Note: the menu is the same for all of the pages except the home

page, which does not have a popup menu)5. One responsive profile page HTML file, including all images and

support files as needed. It shall also include the popup menu(Note: the menu is the same for all of the pages except the homepage and general information page, which do not have a popupmenu)

6. One responsive find people page HTML file, including all exampleimages and support files as needed. It shall also include thepopup menu (Note: the menu is the same for all of the pagesexcept the home page and general information page, which do

not have a popup menu)7. One responsive general information page HTML file, including all

example images and support files as needed.

Table 9 List of Deliverables

6 Test Plan

The following test procedure will be used to verify the final product meets thisdesign specification. Please note that the product must meet all of thespecifications described in this document. That is, the detailed specifications in

the rest of this document take precedence over the following more general testprocedure.

Step User Action Expected Outcome

Home Page

1. Open the home page file on a Home page opens within the


16/21



wide screen monitor using theOpera browser.

browser

2. Inspect the home page bycomparing it to the image in thelayered PSD file.

Home page will be pixel perfect ascompared to the image in Figure 1.

3. Click the restore down button inOpera and slowly change thewidth and height of the screen toverify the page is responsive.

The home page scales inaccordance with responsive designpractices. Once the screen is toosmall to show the menu bar in Figure1, the pages changes to the menubar shown in Figure 2.

4. Click the About link The about page opens.

5. Click the Privacy link The about page opens.

6. Click the Volunteer link The about page opens.

7. Click the Contact link The about page opens.

8. Click the login or signup button The messages page opens.

9. Open the home page in theOpera Mobile Emulator, usingthe Samsung Galaxy S III Profile

Home page will be pixel perfect ascompared to the image in Figure 2.

Messages Page

10. Open the home page file on awide screen monitor using the

Opera browser and click the loginor signup button.

The messages page opens.

11. Inspect the messages page bycomparing it to the image in thelayered PSD file.

The messages page will be pixelperfect as compared to the image inFigure 3, except for the informationicon and notification popup.

Verify that the information icon andnotification message are not shown.

12. Click the restore down button inOpera and slowly change thewidth and height of the screen toverify the messages page isresponsive.

The elements resize as the pagesize shrinks and the page keepsgood margins and so forth inaccordance with responsive designpractices. Once the screen is toosmall to show the menu bar in Figure3, the menu bar changes asdescribed in Section 3.2.


17/21



13. Type text in the search element The search element allows me totype in as much text as desired. Thetext scrolls left as I type so that I canalways see what I am typing.

14. Click the logout icon The home page is opened.

15. Click the login or signup button Return to the messages page.

16. Type text in the simple text blogelement

The simple text element allows meto type in as much text as desired.The text wraps when the textexceeds the width of the box and theheight of the box automaticallyexpands so that I always see the textI am typing. As the height of the boxgrows, the blog messages areautomatically repositioned.

17. Open the messages page in theOpera Mobile Emulator, usingthe Samsung Galaxy S III Profile

The messages page and microblogcontrol scale to the mobile pageappropriately.

18. Switch back to the desktopOpera browser

It is still opened to the messagespage

Microblog Control

19. Click the microblog button The rollout microblog control isopened.

20. Inspect the microblog controlpage by comparing it to theimage in the layered PSD file.

The microblog control page will bepixel perfect as compared to theimage in Figure 4.

21. Click the restore down button inOpera and slowly change thewidth and height of the screen toverify the messages page isresponsive.

The elements resize as the pagesize shrinks and the page keepsgood margins and so forth inaccordance with responsive designpractices.

The image is resized and the Upload

Photo and New Text Paragraphcontrols float left and center on thepage.

Once the screen is too small to showthe menu bar in Figure 3, the menubar changes as described in Section


18/21



3.2.

22. Switch back to the Opera MobileEmulator, using the SamsungGalaxy S III Profile, and open themicroblog control

The elements are scaled to thescreen size and the page keepsgood margins and so forth inaccordance with responsive design

practices. The image is resized andthe Upload Photo and New TextParagraph controls float left andcenter on the page.


It is still opened to the microblogcontrol page.

24. Type text into the text box thatsays Beautiful Flowers

The element allows me to type in asmuch text as desired. The textwraps when the text exceeds thewidth of the box and the height of the

box automatically expands so that Ialways see the text I am typing. Asthe height of the box grows, thecontrols below it are automaticallyrepositioned. If I type enough textuntil the height of the page is filled, ascroll bar is added as needed.

25. Type text into the text box thatsays Type text here

The element allows me to type in asmuch text as desired. The textwraps when the text exceeds the

width of the box and the height of thebox automatically expands so that Ialways see the text I am typing. Asthe height of the box grows, thecontrols below it are automaticallyrepositioned. If I type enough textuntil the height of the page is filled, ascroll bar is added as needed.

26. Click the Publish button The microblog control is closed andthe messages page is re-opened.

27. Click the microblog button The microblog control is re-opened.28. Click the Cancel button The microblog control is closed and

the messages page is re-opened.

Menu

29. Click the Menu button The menu is opened and containsthe following elements listed in Table


19/21



4.

30. Switch back to the Opera MobileEmulator, using the SamsungGalaxy S III Profile, and click themenu button

The menu opens as a rollout menuthat fills the width of the page.


It is still opened to the messagespage.

Find People Page

32. Click the find people menu item The find people page is opened.

33. Inspect the find people page bycomparing it to the image in thelayered PSD file.

The find people page will be pixelperfect as compared to the image inFigure 6.

34. Click the restore down button in

Opera and slowly change thewidth and height of the screen toverify the messages page isresponsive.

The elements resize as the page

size shrinks and the page keepsgood margins and so forth inaccordance with responsive designpractices.

The number of columns containingthe people tiles changes to two whenthere is no longer room for three,and then to one when there is nolonger room for two.

Once the screen is too small to showthe menu bar in Figure 3, the menubar changes as described in Section3.2.

35. Verify the filter button is set toConnected Members

The button is set to ConnectedMembers, the ConnectedMembers text is red, and the AllMembers text is grey.

36. Click the filter button The button changes to show the AllMembers is selected, the AllMembers text is red, and theConnected Members text is grey.

37. Click the filter button again The button changes back to showthe Connected Members isselected, the Connected Memberstext is red, and the All Memberstext is grey.

38. Switch back to the Opera Mobile The elements are scaled to the


20/21


21/21



45. Open the profile page in theOpera Mobile Emulator, usingthe Samsung Galaxy S III Profile

The profile page scales to the mobilepage appropriately.


It is still opened to the profile page

General Information Page

47. Click the logout button The home page is opened.

48. Click the about link The about example page is opened.

49. Inspect the general informationpage by comparing it to theimage in the layered PSD file.

The general information page will bepixel perfect as compared to theimage in Figure 8.

50. Click the restore down button inOpera and slowly change the

width and height of the screen toverify the profile page isresponsive.

The elements resize as the pagesize shrinks and the page keeps

good margins and so forth inaccordance with responsive designpractices.

Once the screen is too small to showthe menu bar in Figure 3, the menubar changes as described in Section3.2.

51. Open the about example page inthe Opera Mobile Emulator,

using the Samsung Galaxy S IIIProfile

The page scales to the mobile pageappropriately.

Table 10 Test Procedure

xethic design specxethicification - iteration 2 (1.0)

Documents