Designing and programming - Part 2
This part of the series will handle the creative part of the cycle. You might loosely categorize the steps of the design process in three different stages. First is the creative methods - this stage contains methods that drives the design project forward adding new ideas and features to the design. However, systemizing the ideas and filtering them is also part of this stage. The next stage contains different methods of implementation. This is where the ideas meet the matter - where ideas become code and components. You get the idea:) The third and last stage is perhaps the most crucial one. This is where you test and evaluate your results. It is now that you have to decide whether the implementations meet with the requirements and visions of the design. The outcome of this stage will determent if the prototype is ready for some real world testing, also called a beta.
Anyways, after clearing that up, the creative stage is what this part of the series will be all about.
Definition: We want to define the problem or find our mission, if you will. What do we want to create?
Solution: In this project, we want to create a web tool. The web provides many different types of media and ways of communicating. There is also a jungle of different tools handling these resources and providing services/methods to use them. The idea is to create a tool that gathers many of these tools into one application.
The tool should be able to receive and handle different kinds of web content. This includes handling communication as well. This means a cross between a browser, an editor and a communication tool.
Brainstorming
Definition: Brainstorming is mainly a social method, gathering a group of people spinning off ideas with the definition as a starting point. The main purpose is to come up with as many ideas as possible (almost no matter how crazy they are:), and writing them down. It is possible to do this alone as well, but the results might be richer if many minds have been to work. The rules are clear; create ideas, do not criticize any ideas(that's for later) and write them down.
Solution: Only I participated in this stage. Since this is a one-man show there is really no choice, but that doesn't mean that the method cannot be used. The result of the session is written in the table below. It divides the tool into three modules and places the different features into each of these.
Subjects to investigate:
Technology research through literature
Definition: This method covers much of the research part. The goal is to map what kind of tools to use to be able to implement the ideas emerged in the previous stage.
Solution: Since this is a project with a rather limited work force (I'm the only one:) it would be sensible to use a framework providing predesigned elements, thus reducing the amount of code to write. Qt from Nokia is such a framework that can provide the functionality and elements I need for this design. There are several other frameworks out there as well, but out of loyalty and my knowledge about it, I've decided to use Qt. There are a number of different perks involved with using Qt as well. Qt is cross-platform, meaning the code can be written for several platforms. Qt's rich modules also provide me with a selection of different technologies enabling me to stick to fewer systems and the trouble of integrating them together. The Webkit module and network module is such examples.
Many of the features require customizing the very bricks that make up the web as it is. HTML, CSS and JavaScript are all major actors in the design and will need to be integrated into some of the tools features.
Stating objectives
Definition: This method is all about systemizing the different conditions related to such a tool. When you're finished digging for ideas and know what tools are available, then this is the stage where the big plan is written and the road ahead is mapped. All external factors like environment, context and requirements must be stated now. Use cases and conditions should also be stated at this stage, together with a good overview of available resources and a time plan.
Solution:
Now as I said, this is where your plan comes together. Yet, since this is not a project any external requirements, (there's no boss breathing down my neck ;) I'm not going to create a restraining schedule. However, I do need some kind of plan. In the following table, I will state most of the necessities and requirements of the project and a solution on how to implement the tool.
Summary:
So that is at least the short version of that first run through the creative processes. Having to go back to these steps multiple times is and will be necessary to develop and update ideas both old and new. Creativity usual means a lot of work. At least when you've been able to be very creative. Including all ideas in this post makes no sence, so I'm keeping a backlog including the things I have not written down here. This way the chance of "loosing" ideas will be less.
Now, this is not a template of how a creative process should be run, but it should give a picture of how it could be. The important part is that you follow this mantra; develop ideas - develop product - test results.
So, as always you are welcome to leave comments or questions. The purpose of this series is not to be academic, but if you have views or comments, I would love to read them.
The Creative Stage
First of all, we need a general idea about what we want to create. Such idea is usually already there when the designer sits down to start working (kind of a give-away - really:). The next step will be to find out which ways it would be sensible to develop the ideas further. This might differ from project to project. Designing a website would require other methods than designing a tool for handling great amounts of information. However, for this project I've mainly decided to use the following methods:- Defining general idea
- Brainstorming
- Technology research through literature
- Stating objectives
Definition: We want to define the problem or find our mission, if you will. What do we want to create?
Solution: In this project, we want to create a web tool. The web provides many different types of media and ways of communicating. There is also a jungle of different tools handling these resources and providing services/methods to use them. The idea is to create a tool that gathers many of these tools into one application.
The tool should be able to receive and handle different kinds of web content. This includes handling communication as well. This means a cross between a browser, an editor and a communication tool.
Brainstorming
Definition: Brainstorming is mainly a social method, gathering a group of people spinning off ideas with the definition as a starting point. The main purpose is to come up with as many ideas as possible (almost no matter how crazy they are:), and writing them down. It is possible to do this alone as well, but the results might be richer if many minds have been to work. The rules are clear; create ideas, do not criticize any ideas(that's for later) and write them down.
Solution: Only I participated in this stage. Since this is a one-man show there is really no choice, but that doesn't mean that the method cannot be used. The result of the session is written in the table below. It divides the tool into three modules and places the different features into each of these.
| Component/Feature | Description | Dependencies |
|---|---|---|
| Browser, View | The browser needs a viewing window to display the graphic content from the web. It must read text, images and preferably several animation plugins. | This requires implementation of a web API. |
| Browser, Navigation | The browser must provide the user with navigation such as, back, forward, stop, reload, home etc. It must also have a complete history function. | This requires implementation of a web API. |
| Browser, View | The browser window should open in a new top level window or in a tab. | This requires implementation of a windowing API. |
| Browser, Tools | Further, the window should have a menubar, toolbar, statusbar, addressbar to provide actions for the user. | This requires implementation of a window tool API. |
| Browser, View | On hovering a window tab, a preview of the window should pop up. | This requires implementation of a web API and an event handler. |
| Browser, View | On hovering a link for five seconds, a preview of the destinated site should pop up. | This requires implementation of a web API and an event handler. |
| Browser, View | History should appear as a collapsible tree based on domain | This requires the web(navigation) API and an API displaying lists. |
| Browser, Tools | Normal functions as open, save, search, close, exit, edit, print, source, help, about, zoom, tips, select all copy, cut, paste, view functions (expand, full page, minimize) | This requires an API for handling text and media. |
| Browser, Tools | Print/download pagetree. The tree contains of the current page and linked documents two to four levels down. The tree should be checkable. | This requires a dialog and printing API. |
| Browser, Tools | Bookmarks: Bookmarks should be organized in a table. Links should be movable, delete and editable. Folders should also be possible to use. | This requires a dialog and item view API. |
| Browser, View | Enable sending a page to a different window. (i.e) send the search result to a side window to click the links and open them in a separate window. Might be interesting to use a search line edit and list the result in a page on the side redirecting the pages opened to the main view. | This requires a web and a windowing API. |
| Component/Feature | Description | Dependencies |
| Editor, View/Edit | Enable the user to analyze the web content. This content should include HTML, CSS, JS and XML etc. The code should be color-coded and the editor should be keyword aware, i.e. able to tell content from code. The code values should be editable on the fly. | This requires a web API, a text editor API and logic functions. |
| Component/Feature | Description | Dependencies |
| Communication, Chat/Messaging | Chat/news part should be docked on the side of the main window. | This requires implementation of a windowing API that can handle docking of sub windows. |
| Newsfeeds, Tools | Rss in separate window. List news and make them clickable. | This requires a web API. |
| Communication/Multimedia, Tool | Enable the user to download and upload files. More specifically podcast and mp3. | This requires a web API and a media API. |
Subjects to investigate:
| Component | Feature/Technology | Description | Investigate |
|---|---|---|---|
| Application | Threads | To make certain parts of the tool run smoothly, threads might be improve performance. | Threads and need for such. |
| Application | Mouse gestures | The user should be able to use mouse gestures to navigate or use the gestures with tools. | This requires an event handler API. |
Technology research through literature
Definition: This method covers much of the research part. The goal is to map what kind of tools to use to be able to implement the ideas emerged in the previous stage.
Solution: Since this is a project with a rather limited work force (I'm the only one:) it would be sensible to use a framework providing predesigned elements, thus reducing the amount of code to write. Qt from Nokia is such a framework that can provide the functionality and elements I need for this design. There are several other frameworks out there as well, but out of loyalty and my knowledge about it, I've decided to use Qt. There are a number of different perks involved with using Qt as well. Qt is cross-platform, meaning the code can be written for several platforms. Qt's rich modules also provide me with a selection of different technologies enabling me to stick to fewer systems and the trouble of integrating them together. The Webkit module and network module is such examples.
Many of the features require customizing the very bricks that make up the web as it is. HTML, CSS and JavaScript are all major actors in the design and will need to be integrated into some of the tools features.
Stating objectives
Definition: This method is all about systemizing the different conditions related to such a tool. When you're finished digging for ideas and know what tools are available, then this is the stage where the big plan is written and the road ahead is mapped. All external factors like environment, context and requirements must be stated now. Use cases and conditions should also be stated at this stage, together with a good overview of available resources and a time plan.
Solution:
Now as I said, this is where your plan comes together. Yet, since this is not a project any external requirements, (there's no boss breathing down my neck ;) I'm not going to create a restraining schedule. However, I do need some kind of plan. In the following table, I will state most of the necessities and requirements of the project and a solution on how to implement the tool.
| Requirement | Solution |
|---|---|
| Web API | Qt Webkit will cover most of the requirements related to the web interface. In addition, there will be a need for AJAX and knowledge of the central web technologies and their syntax. |
| Windowing API | Qt provides a rather large windowing API. This includes docking of windows, toolbars, statusbars etc and tabbed windows. It will be sufficient for this project, so that is what I'll start with. |
| Event and Signal handler API | Qt provides a large event handler API. This will be enough to create event handlers for both keyboard and mouse. |
| Text handling API | Qt provides a large API for handling text. This means both text and strings as strings of code. |
| Dialog API | Qt provides a good dialog API and it can handle a lot of different dialogs. |
| Item view | Qt also provides a good item view API. This includes lists, tables and trees. |
| Paint and print API | Qt provides a large API for both painting and printing. This can also use graphics hardware to render images and windows faster. This might be handy when displaying previews while keeping the application running smoothly. |
So that is at least the short version of that first run through the creative processes. Having to go back to these steps multiple times is and will be necessary to develop and update ideas both old and new. Creativity usual means a lot of work. At least when you've been able to be very creative. Including all ideas in this post makes no sence, so I'm keeping a backlog including the things I have not written down here. This way the chance of "loosing" ideas will be less.
Now, this is not a template of how a creative process should be run, but it should give a picture of how it could be. The important part is that you follow this mantra; develop ideas - develop product - test results.
So, as always you are welcome to leave comments or questions. The purpose of this series is not to be academic, but if you have views or comments, I would love to read them.
Comments
Post a Comment