Thursday, 30 October 2014
Week10 Facebook login implementation
After went through tough time working on Facebook SDK , I implemented the login system which allows users log in DIY TROVE with their Facebook account. Also, I was responsible for making the landing page of our website with Facebook Like & Share button. By using Facebook Javascript SDK, I coded the landing page with Facebook login, like and share button. Users can login our website with their Facebook account name and profile picture, like our website and share it on their Facebook page.
Week9 Work-in-process Demo
In the contact today, we demonstrated our work-in-process website by presenting a walk through of the website under a virtual context. The website is a basic frame work of our website which provides the basic functionality of DIY Trove. It was consisted of three main webpage which contains our major content: about page, rough cuts, and dashboard.
Week8 UI design
We were preparing the images for UI design this week.
Buttons:
Website mockups:
User's profile picture:
Logo design :
.png)
Buttons:
Website mockups:
User's profile picture:
Logo design :
Week8 Mockup
This week we did original mockups for our website as a guide for coding the real page.
The mockup contained the main structure of our main page, including tags for About, RoughCuts and Dashboard. Also there are user's profile picture and the location of DIY TROVE logo.
Week 8 Style Guide
Style Guide
A
brief visual style guide review was conducted to assess the similarities
between different craft and design websites. The main commonalities identified
were:
·
Light/bright
themes with fresh colours.
·
Cool/organic
colouring for sites that catered to the female demographic i.e. Modcloth, Etsy
and Craft Gawker.
·
Stark
colour contrasts for sites that catered to unisex and male demographics i.e.
Pinterest and DIY Network.
Text Treatment:
Two
easy-to-read, clean, sans-serif type fonts, Lato and Arvo have been chosen. The
foundation for this decision was influenced by the website Modcloth and its
design.
All
text on the site will be set in this typeface and are available from
<http://www.google.com/fonts>. The fonts can be implemented via the CSS
using the following code:
<link
href=’http://fonts.googleapis.com/css?family=Lato|Arvo’rel=’stylesheet’
type=’text/css’>
Font size
and style
<h1> Lato Bold 700 {font-size: 2em} 428A8C
<h2> Lato Normal 400 {font-size: 1.5em}
428A8C
<h3> Lato Normal 400 {font-size: 1.308em}
7AC6CE
<p> Lato Book 300 {font-size: 1.17em} 00000
<a> Lato Book 300 {font-size: 1.17em} A0A0A0
<a visited> Lato Book 300 {font-size:
1.17em} 7AC6CE
Week7 Key Changes to original concept based on feedback
Changes we are going to make according to feedback on paper prototypes :
1. We now just focus doing the pages for community users.
2. The first page will be user's dashboard
3. There will be two tags for dashboard :
4. There will no comment section on the "rough cuts" page
5. users click on one rough cut , then get to "rough cut "page, where there will be image and some brief information for that rough cut, and comment section . For further information, users can click the "external link " and redirected onto external website for full information of that rough cut .
1. We now just focus doing the pages for community users.
2. The first page will be user's dashboard
3. There will be two tags for dashboard :
- User's saved rough cuts
- my profile
4. There will no comment section on the "rough cuts" page
5. users click on one rough cut , then get to "rough cut "page, where there will be image and some brief information for that rough cut, and comment section . For further information, users can click the "external link " and redirected onto external website for full information of that rough cut .
Subscribe to:
Posts (Atom)