Author Archives: andaluiza

Basic implementation

We would like to show you some screens of our project. So far we have a basic implementation of the main page of the web application which contains the sidebars menu, the top bar with “go back”, “go forward” and “refresh” buttons, the search engine with advanced search on the web (Google search api) and the “Sign Up”, “Sign in” and “About” links. We’ve also implemented a tab menu in which we would like the pages as “About”, search results, categories, saved link and widgets to appear.

Mainly, to develop and to create interaction in our application we used html code, javascripts and jquery UI library and php for “Sign in”, “Sign up” pages.

For now, the main page looks like this:

Activating the “+” button to add new tab in the tab bar, a new empty tab will appear. Tabs have the sortable property, they can be switched between them and they look like this:

In the “About” tab is opened the page “About” by clicking the link from the top bar and looks like this:

The sidebars are opening on mouse over them action and disappear if the cursor lives the area.

The left side bar looks like this:

and the right sidebar looks like this:

On each them there will be icons of categories, links and widgets which are going to be opened in tabs.

Introducing words in the search bar, the results relative to the information searched are going to appear in the “Results” tab. The advanced search provides the options for searching pieces of information, images, videos and news relative to the introduced words.

A web search looks like this and the results are displayed similar with google results, with links relative to the search input. On the bottom of the results, there is a “more” button for displaying  8 more found results:

Searching for images looks like this:

Searching for videos looks like this:

And news search looks like this:

New steps in developing and designing the project are going to be fallowed by our team to deliver the best final solution.

Leave a comment

Posted by on June 2, 2011 in Project Solutions


Used design patterns

After analysing our wireframes, we’ve discovered these design patterns:

– Search : when users need to find an item or specific information.(we used this in the top of the application; used to search on the net)

– Login : when users need to identify themselves so that stored data about/of them can be used in the process they are in (top right corner)

– Register:  when users repeatedly need to (re)enter a large amount of personal data (top right corner)- Customizable Window : when users want to have fully personalized content (used to customize the the main page)

– Country selector, Date selector, Language selector… : when users need to select a date or a time period, their favourite language or their country (used when completing the account info and settings form)

Constraint Input: when user needs to supply the application with data but may be unfamiliar with which data is required or what syntax to use (used when completing the account info form)

Form: when users need to provide personal information and send it to a service provider (registration, login, account info, settings )

Retractable Menu: when users need to access the navigation but they may need the screen space even more (two retractable menus placed on the right and left sides of the page)

Directory Navigation: when users need to select an item out of a set (the widgets and links are displayed grouped into categories)

Tabs: when users need to access a particular section of the entire avaiable information (placed in the top of workspace)

Thumbnail: when designer wants to give the user an idea of how an image, movie or page looks like,              but doesn’t want to display the full-scale image, movie or page because of download time and screen space. (when the user make a mouse-over a link, a sugestive picture appears)

Action Button: when users need to take important action that is relevant in the current context of the page they are viewing.They must be made aware of the importance of the action in relation to other actions on the page or site (used when we want to submit a form, when we need to perform a decision action)

Stepping: when users need to view/act on a lineair ordered set of items. (used when we want to see a previous web page or a next page to see another widgets)

Paging: Long lists of similar looking data, such as search results, are difficult to make sense of.(used when adding a widget)

Center Stage: when users need to know where to find the important things in relation to all the things on the page (user in the main workspaces placed in the center of the page)

Calendar Picker: when user wants to find or submit a particular piece of information based on a date or between a date range.(when completing birthdate in the account info form )

Input Prompt: when the user needs to enter data into the system (used in the search field)

Tour: when the user need to learn about an offered service or product or make the decision to join a service or buy a product.( present in the about page to inform the user how the application works)

Overlay: when user needs to be notified about something important, or additional/related information needs to be shown and it is important to keep the user on the same page.(when user wants to edit and add something)

Vertical Module Tabs: when you need to find a way to show selection-dependent inputs or provide a way for the user to navigate through one or more stacked panes of content without refreshing the page.(for the account info and preferences tabs)

Multiple Selection from a Small List: when users need to be able to select multiple items from a small set of possible items.(when selecting preferences and account info)

Leave a comment

Posted by on April 14, 2011 in Project Solutions


Use Cases

Launching the application:











Doing other actions:

Leave a comment

Posted by on April 14, 2011 in Project Solutions



Our solution is designed for a certain user category, the users who are very busy. In the table below we’ve described some user profiles considering some important aspects that helps us to know the main users who are going to use our application. After researching, observing and interacting with the segment of users which our application is addressing, we’ve created the user profile:

Leave a comment

Posted by on April 13, 2011 in Project Solutions


Some details and scenarios for my solution

Regarding my post, I propose a solution that involves an web application with similar functionalities like a browser. The application would provide a search engine (Google or Yahoo), access to Google Maps, to Email accounts, to social websites accounts, News and other on-line services for different interest and activity areas.

I was thinking about reducing the users’ working domains or social status. Since they suppose to be very busy people, to solve their many problems and needs, I’ve restricted the tasks like managing to do lists, meeting, agendas, accounts, calendar, schedule or managing activity and personal responsibilities to be accomplished by users who are businessmen with families or another kind of managers who must be up to date with everything in real time.

The users would have the possibilities to customize their domains of interests categories, recent activity, to rearrange their workspace, to access and process in a very quick way the tasks and feel comfortable and safe

using the functionalities of the application.

I’ve sketched some scenarios for my solution.

First refers to the About page:






The Sing in and Sing up scenes look like this:

Sign in:






Sign up:






Opening some useful items, like Calendar or reading News or reading Yahoo emails:

Calendar opened by clicking on the link displayed like suggestive picture/icon in the right side:






Reading News:






Reading Yahoo Emails:









Adding new “To Do List” look like this:









Adding Category or Widget actioning the +add button:









Adding Widget :









Deleting a category actioning -delete button:









Other adds and deletes are similar with the ones above as functionalities.

Dealing with the search engine, a possible search would look like this:

Leave a comment

Posted by on April 11, 2011 in Project Solutions


My first version of sketch

Good evening!

I’ve just finished a sketch of my solution of wireframe for the project. Tomorrow I’ll review my sketch and I’ll think about the flow of the application and storyboard.

To design the wireframe I used the on-line tool iPlotz.

For now, my “little bro” 😀 looks like this:

1 Comment

Posted by on April 6, 2011 in Project Solutions


Second meeting

Today we have done a brainstorming about: how storybord and wireframe should look like, the most important aspects of our project, the tasks for each member of the team and the deadline. For the next meeting, we hope to choose the final solution(wireframe) and make a video presentation.

Leave a comment

Posted by on April 5, 2011 in Meetings