Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Webpage wireframes_pngs #6

Open
Bhanvee opened this issue Apr 18, 2015 · 18 comments
Open

Webpage wireframes_pngs #6

Bhanvee opened this issue Apr 18, 2015 · 18 comments

Comments

@Bhanvee
Copy link

Bhanvee commented Apr 18, 2015

wireframe 1

wireframe 2

@kaustavdm
Copy link
Contributor

I looooved the dummy slogan 👍

@Bhanvee
Copy link
Author

Bhanvee commented Apr 20, 2015

Thanks :)

On Sun, Apr 19, 2015 at 9:34 PM, Kaustav Das Modak <[email protected]

wrote:

I looooved the dummy slogan [image: 👍]


Reply to this email directly or view it on GitHub
#6 (comment).

@Bhanvee
Copy link
Author

Bhanvee commented Apr 20, 2015

The current wireframes!

0
1
3
4
contacts_circles

@Bhanvee
Copy link
Author

Bhanvee commented Apr 20, 2015

one of the pages in between!
2

@Sarvistha
Copy link

More websites wireframes.....
Iteration 1
First screen having logo and tagline which will be like welcoming screen. After that logo will shift towards left edge of screen and timer will be there.
Mobile and written features will slide from right side and left side respectively.
The changing in screen will depend on timer (new representation of changing screen)
Timer used as it is a conference, detail discussions will go keeping in mind the time limit and puctuality. As time moves you will be more clear what app going to provide you. Clarification and satisfaction comes as time passes.
Gaining of new things from conference as time pass away. So every where time playing its role.

1
2
3
4
5
6
7
8

@Sarvistha Sarvistha reopened this Apr 29, 2015
@Sarvistha
Copy link

Iteration 2
Want to give a feeling of seminar or some interactive discussion going. Through this discussion you get to know new features (means app features).
Clicking on the boxes will represent new screen explaining new feature and also show that no body will left out in discussion.

1 g
2 g
3 g
4 g
5 g
6 g
7 g
8 g
9 g

@Sarvistha
Copy link

Iteration 3 ( page having pics in background)
Simple movement of website, having blur working concepts pics in the background running.
The content on the screen diffuses as move horizontal and next screen content appear. The background images will remain same or if we have lot of images we can change them also.
The image in the mobile will be also move horizontally. So the motion all over will be horizontal.

1 j
2 j

@Sarvistha
Copy link

Iteration 4 (Storyboard style)
Transforming logo into filter. From logo questions will arise which will convert logo form into filter form.
The filter will consist of people, taking part in conversations and discussion. Questioning is happening but people are confused.
Than the bottom of filter where mobile screens will start coming will filter the questions and solve other problems basically what best feature our app will provide to get out from situations like this.
After so many questions, questions will get filter through our app features and people in discussion will be satisfied with the conversation.
So through story telling, importance of app and its features.
1 l
2 l
Logo transition into funnel (filtering process of questions)
3 l
4 l
Speaker, Moderator and audience playing role
5 l
6 l
(Lower end of funnel where filtering is happening)
7 l
8 l
Final question selected to answer
9 l
10 l
11 l

@Bhanvee
Copy link
Author

Bhanvee commented May 11, 2015

iteration no. 5 ! yo!

hey! thoughts behind this concept..

  1. It is a Dandelion flower. The inner circle contains the logo and is clickable
  2. As you click, the flower 'activates' and the pollen burst outwards
  3. They all resemble the confused audience or participants, who have tons of Qs in their mind
  4. they start organizing when they get to know of ConQ (a voice over from behind)
  5. Keep organizing : they all structure into a circle ( a form of loading kinda animation)
  6. Then the concentric circles increase, to indicate that ConQ accomodates large audience as well (a voice over tells the story from behind, throughout)
  7. A person raises a question (shown as a tick mark, for now, but can be like a question mark that pings up). And those who like the Q also ping up their support (shown as ticks from elsewhere on the circles itself)
  8. Speaker then gives the answer (shown in the middle, as a circle). Which turns into a green tick, as an action of giving answer
  9. Multiple smilies around show, everyone is happy and satisfied. All queries solved!

Yo Dandelion!

1
2
3
4
5
6
7
8
9

@Sarvistha
Copy link

Iteration 6
Logo is like a loading screen, after some time logo from centre moves to the edge for next screens.
The presentation is like all people taking part in the conference and discussion collaboratively.
Very interactive session.
Click on the arrow will take to next screen
1 a
2 b
3 a
4 a
5 a
6 a

@Sarvistha
Copy link

Iteration 7

Logo coming on first screen. Through animation, the three circles from behind logo will appear, which present, expanding the network and making discussion interactive.
Clearing (reducing) of circles as it move to next screen means clearing of confusion and doubts.
Simple and continuous flow of screen in same pattern will help user to figure out and understand website clearly.
Circle will darken automatically and each circle represent new screen explaining features. We can have side dots represent each screen.
So it can be animated as well as user can handle it from its side.
And at last the mobile and written part move right side and left side respectively.
Circle will zoom out and small circles having contact will travel in the screen.

1 b
1 c
2 b
3 b
4 b
5 b
6 b
7 b
8 b
9 b

@Sarvistha
Copy link

Iteration 8
Dialing concept.
Dial your questions and get satisfied answers same as dial your screen forward looking for new feature which app will going to provide.
So every next dial will give you satisfaction and response.
Flow of website

  1. As soon as you click on logo, the circle comes out from behind logo with small dots. Arrangements of dots will take place. After that dot will get darken, the circle shifts downward and expand. Mobile screen from right side will appear and logo will moves towards left.
  2. After all features done, circle with some small circles will come which will show contact us screen.
  3. Written part means feature explanation will come in the dial circle at bottom.

1 c
1 d
2 c
3 c
4 c
5 c

@Sarvistha
Copy link

Iteration 9
Another representation of dialing.
Circle will appear from behind logo, logo will either move to top or to side edge as shown in wireframe.
Than mobile and written bar will appear will respective sides within circle.
And every dot represent each screen and feature.
It will be an animation, as soon as next dot appear, the mobile screen and content inside will change. They will move right side and left side of screen respectively.
Once the animation will be over, the user had freedom to see the screen he want to read again or the dots on circle will be of grey and as soon as user click on dot, that screen will come
So both animation and user hand held.
1 d
2 d
3 d
4 d
5 d
6 d
7 d
8 d
9 d
10 d

@Sarvistha
Copy link

Iteration 10 (try to change form language)
Instead of circle try it in rounded rectangle format.
Also give conference look and little seriousness.

1 e
2 e

@Sarvistha
Copy link

Iteration 11 (need refinement)
Its new format of changing screen, instead of any horizontal or vertical representation, we will have diagonal representation.

1 f

2 f

3 f

@Sarvistha
Copy link

Iteration 12
As soon as click on logo, some bars will slide from right side of logo.
Each bar represent each screen.
Concept of dec card is used. Throw your questions and get answers for it which will satisfy you in the end. Bars also represent effective communication.
1 h
2 h
3 h
4 h
5 h
6 h
7 h
8 h
9 h

@Sarvistha
Copy link

Iteration 13
Simple zoom in and zoom out screen effect instead of horizontal and vertical motion.
As soon as click on grey rounded rectangle (represent each screen), will show image and feature for particular rectangle. Just a new form to explore.

1 i
2 i
3 i
4 i
5 i
6 i 1
6 i 2

@Sarvistha
Copy link

Iteration 14
Representing things in 3D
Cube will rotate and the sides will get activated sequence wise.
One cuboid will let you go through journey of ConQ.
Every face of cube will represent page for ConQ and its features.
So something fold and unfold.
1 k
2 k
3 k

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants