Baggerman, L (1 Jun 2000). Design for Interaction: User-friendly Graphics . US and A: Rockport Publishers Inc.; illustrated edition edition . p10-25.
Friday, 25 November 2011
Design for Interaction: User-friendly Graphics (book)
This book was used for the research part of the project and helped in the analysis of the graphics and imagery within websites. It helped me understand how they interacted with the user and compliamented the structure.
Baggerman, L (1 Jun 2000). Design for Interaction: User-friendly Graphics . US and A: Rockport Publishers Inc.; illustrated edition edition . p10-25.
Baggerman, L (1 Jun 2000). Design for Interaction: User-friendly Graphics . US and A: Rockport Publishers Inc.; illustrated edition edition . p10-25.
The ideas/ plans for the five artefacts
The first: This will be a website that uses the methods and theories of design whilst using the techniques I found in my secondary research to produce a website that interacts with the audience and engages them. This will help in keeping them interested in the content. Thius will stop them from going elsewhere for the content they require. I will compare it with the second artefact in gathering results and data to gain a better understanding of the audience with my own primary research. This will support my findings within the report. To hopefully show how interaction and design principles with the correct use of different media forms engage with the user to keep them interested.
Second artefact: This will be another website that uses the same content and genre as the first artefact but instead will do the opposite. It will work as a comparison between both the first and second to see how the different methods and principles with the correct use can achieve an interactive and functional website that engages the user. This will hopefully show that uses poor colour schemes no images/little with a combination of obscure graphics and designs work against the client in making a website that doesn’t engage the browser and may cause them to look elsewhere.
Third artefact: This will be a series of focus groups and interviews linking back to the first two artefacts in gathering a range of data that supports the experiment. This will then be displayed in tables and charts to look at the patterns and data more efficiently.
Forth artefact: The next artefact will be a questionnaire that will be used to gain the opinions and beliefs of numerous participants. I aim to gain 100-200 people to part take in the survey. I will do this from one to one hand outs and chain mail through university and my blog and other social networks. I also aim to split them into too equal groups of people who are computer illiterate/ or of less knowledge of the genre against people who are in media and use computers on a regular basis. These results will be compared and analysed with an evaluation to conclude the data.
Fifth artefact: In the production of the final artefact I want to find out how interaction not only affects the desktop market of web but mobile. In this area I will look at a mobile application. I will create it in the same genre as the first artefact. It will test how interaction within mobiles and tablets can engage with the user.
In doing these five artefacts I will gain primary research that will give me accurate results.
Second artefact: This will be another website that uses the same content and genre as the first artefact but instead will do the opposite. It will work as a comparison between both the first and second to see how the different methods and principles with the correct use can achieve an interactive and functional website that engages the user. This will hopefully show that uses poor colour schemes no images/little with a combination of obscure graphics and designs work against the client in making a website that doesn’t engage the browser and may cause them to look elsewhere.
Third artefact: This will be a series of focus groups and interviews linking back to the first two artefacts in gathering a range of data that supports the experiment. This will then be displayed in tables and charts to look at the patterns and data more efficiently.
Forth artefact: The next artefact will be a questionnaire that will be used to gain the opinions and beliefs of numerous participants. I aim to gain 100-200 people to part take in the survey. I will do this from one to one hand outs and chain mail through university and my blog and other social networks. I also aim to split them into too equal groups of people who are computer illiterate/ or of less knowledge of the genre against people who are in media and use computers on a regular basis. These results will be compared and analysed with an evaluation to conclude the data.
Fifth artefact: In the production of the final artefact I want to find out how interaction not only affects the desktop market of web but mobile. In this area I will look at a mobile application. I will create it in the same genre as the first artefact. It will test how interaction within mobiles and tablets can engage with the user.
In doing these five artefacts I will gain primary research that will give me accurate results.
Possible Clients
Rock city – Mobile variation of the website with media queries
Other local bars that may not already have an existing website with a mobile variation
Small business or companies - Such as low key business opened by graduates or uni based companies.
Gym website – This could have a database with PHP to create a schedule and booking system with timetable.
A portfolio website that will be used by photographers, graphic designers or other forms of designers.
Other local bars that may not already have an existing website with a mobile variation
Small business or companies - Such as low key business opened by graduates or uni based companies.
Gym website – This could have a database with PHP to create a schedule and booking system with timetable.
A portfolio website that will be used by photographers, graphic designers or other forms of designers.
Live Client - Ideas
Ideas and proposal
My initial plan is to create the following for the specific client. I aim to create a web application that fits the needs of the client and has additional features that will work with the structure and functionality of the website to ensure an interactive design. (Below is a list of the features I intend to add or possibilities for the application).
QR tag
Scroll box - on some of the information pages
J query toolbar/ navigation
A database with PHP for Schedule’s or timetable, with possible login and booking.
A mobile variation, with media queries to apply it to tablets and mobile devices.
Using percentages to readjust the slides structure to the screen size.
A contact Form that links to the administrators email.
Rollovers/ page transitions
Icons linking to social networks (Twitter, Facebook, and Youtube.)
J query sliding gallery.
Twitter Feed, that updates with comments.
All these features will show my skills as programmer whilst the content and layout will show design skills I have and my approach on graphic design.
My initial plan is to create the following for the specific client. I aim to create a web application that fits the needs of the client and has additional features that will work with the structure and functionality of the website to ensure an interactive design. (Below is a list of the features I intend to add or possibilities for the application).
QR tag
Scroll box - on some of the information pages
J query toolbar/ navigation
A database with PHP for Schedule’s or timetable, with possible login and booking.
A mobile variation, with media queries to apply it to tablets and mobile devices.
Using percentages to readjust the slides structure to the screen size.
A contact Form that links to the administrators email.
Rollovers/ page transitions
Icons linking to social networks (Twitter, Facebook, and Youtube.)
J query sliding gallery.
Twitter Feed, that updates with comments.
All these features will show my skills as programmer whilst the content and layout will show design skills I have and my approach on graphic design.
Webdesign Management Plan
I was browsing the web and found this example of a way of time mangement in web design. I will use this as a starting point for creating my own gnat chart that will show the work plan in more depth.
Saturday, 19 November 2011
Principles of user interface design
The principles of user interface design are intended to improve the quality of user interface design. Constantine and Lockwood principles are as follows:
• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.
• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.
• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.
• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.
These are some of the different principles I analyzed whilst looking at the websites. This helped in producing my research report and in gaining more accurate data whilst giving me a better understanding of web applications.
Raskin, J. (27 August 2011). Principles of user interface design. Available: http://en.wikipedia.org/wiki/Principles_of_user_interface_design. Last accessed 16th Nov 2011.
• The structure principle: Design should organize the user interface purposefully, in meaningful and useful ways based on clear, consistent models that are apparent and recognizable to users, putting related things together and separating unrelated things, differentiating dissimilar things and making similar things resemble one another. The structure principle is concerned with overall user interface architecture.
• The simplicity principle: The design should make simple, common tasks easy, communicating clearly and simply in the user's own language, and providing good shortcuts that are meaningfully related to longer procedures.
• The visibility principle: The design should make all needed options and materials for a given task visible without distracting the user with extraneous or redundant information. Good designs don't overwhelm users with alternatives or confuse with unneeded information.
• The feedback principle: The design should keep users informed of actions or interpretations, changes of state or condition, and errors or exceptions that are relevant and of interest to the user through clear, concise, and unambiguous language familiar to users.
• The tolerance principle: The design should be flexible and tolerant, reducing the cost of mistakes and misuse by allowing undoing and redoing, while also preventing errors wherever possible by tolerating varied inputs and sequences and by interpreting all reasonable actions.
• The reuse principle: The design should reuse internal and external components and behaviors, maintaining consistency with purpose rather than merely arbitrary consistency, thus reducing the need for users to rethink and remember.
These are some of the different principles I analyzed whilst looking at the websites. This helped in producing my research report and in gaining more accurate data whilst giving me a better understanding of web applications.
Raskin, J. (27 August 2011). Principles of user interface design. Available: http://en.wikipedia.org/wiki/Principles_of_user_interface_design. Last accessed 16th Nov 2011.
Friday, 18 November 2011
User Requirement analysis
Requirements Gathering- A requirement is a statement of what the system should do. The overall goal of requirements is to express what the proposed system should do; just what it should do. The “hows” are answered by the anylsis and design. It is a key method of expressing the requirements in a way that all concerned can understand.
Analysis – Analysis is the process of examining the requirement’s and making models such as wireframes, storyboards and site maps.
Design- The principal is to create the models into a design.
Implementation- Implementation takes the ideas from design to add the code of the web applications.
Test- This is to test the web application and check the code works and functions correctly
Deployment- Is to deploy the web application.
Analysis – Analysis is the process of examining the requirement’s and making models such as wireframes, storyboards and site maps.
Design- The principal is to create the models into a design.
Implementation- Implementation takes the ideas from design to add the code of the web applications.
Test- This is to test the web application and check the code works and functions correctly
Deployment- Is to deploy the web application.
Definition of Research Methodologies
‘Generally speaking, methodology does not describe specific methods despite the attention given to the nature and kinds of processes to be followed in a given procedure or in attaining an objective. When proper to a study of methodology, such processes constitute a constructive generic framework; thus they may be broken down in sub-processes, combined, or their sequence changed. As such, methodology may entail a description of generic processes, philosophical concepts or theories related to a particular discipline or field of inquiry. Similarly methodology refers to the rationale and/or the philosophical assumptions that underlie a particular study or a particular methodology (for example, the scientific method). In scholarly literature a section on the methodology of the researchers is typically de rigueur.’ (Wiki,2010). This is a definition I discovered that describes the research methodologies and helped me in writing the paragraph for my research report.
I found the Methodology is generally a guideline for solving a problem, with specific components such as phases, tasks, methods, techniques and tools. It can be defined as the analysis of the principles of methods, rules, and postulates employed by a discipline also as the study or description of methods.
I found the Methodology is generally a guideline for solving a problem, with specific components such as phases, tasks, methods, techniques and tools. It can be defined as the analysis of the principles of methods, rules, and postulates employed by a discipline also as the study or description of methods.
Online Hosting
I have been recently looking at online hosting and servers, looking at the different deals and price variations. This was to see what site would offer me the best online hosting.
Here is a list of a few I found:
http://www.rustymonkey.com/nottingham-web-design/web-hosting.php - this is a Nottingham/local based one
http://www.pipeten.com/
http://www.ipage.com/ipage/index.html
Here is a list of a few I found:
http://www.rustymonkey.com/nottingham-web-design/web-hosting.php - this is a Nottingham/local based one
http://www.pipeten.com/
http://www.ipage.com/ipage/index.html
Python
The Python programming language is actively used by many people, both in industry and academia for a wide variety of purposes. This object-orientated language is quite similar to Java and ASP.NET I found in its ability to create dynamic web pages and various types of software applications. Python integrates well with many other technologies. Apart from Ruby, Python is said to be the fastest growing open-source languages available, used in everything.
A clean object-orientated design and extensive support libraries make Python far more productive than languages such as C++, Visual Basic and Perl. Some of its major advantages include:
Cross Platform - Python is compatible with most major operating systems
Speed - Python is much faster than other interpreted languages.
Extensible - Python makes it easy to write your own extensions in C or C++.
Highly Scalable - The extensibility, speed and power of Python provides access a dynamic set of tools that help you effortlessly scale to larger projects.
Easy to Maintain - Python's natural elegance produces code that is not only easy to read, but simple to redesign and modify as well.
Open-source - Starting as an open-source project, Python's efficiency can be attributed to the contributions of thousands of developers around the world.
I have created a list from numerous sources just listing the possibilities of using python within web documents.
OpenERP, an open source comprehensive suite of business applications
ERP5, a powerful open source ERP / CRM used in Aerospace, Apparel, Banking and for e-government
GNU Mailman, one of the more popular packages for running email mailing lists
MoinMoin, a popular wiki engine
MootiroForm, an open source form creating software
Planet, a feed aggregator
Plone, a user-friendly and powerful open source content management system
Roundup, a bug tracking system
ViewVC, a web-based interface for browsing CVS and SVN repositories
Trac, web-based bug/issue tracking database, wiki, and version control front-end
Python Shell, A Python shell inside the Google Chrome browser.
Turntable.fm, a social media site for interactively sharing music, currently in beta
A clean object-orientated design and extensive support libraries make Python far more productive than languages such as C++, Visual Basic and Perl. Some of its major advantages include:
Cross Platform - Python is compatible with most major operating systems
Speed - Python is much faster than other interpreted languages.
Extensible - Python makes it easy to write your own extensions in C or C++.
Highly Scalable - The extensibility, speed and power of Python provides access a dynamic set of tools that help you effortlessly scale to larger projects.
Easy to Maintain - Python's natural elegance produces code that is not only easy to read, but simple to redesign and modify as well.
Open-source - Starting as an open-source project, Python's efficiency can be attributed to the contributions of thousands of developers around the world.
I have created a list from numerous sources just listing the possibilities of using python within web documents.
OpenERP, an open source comprehensive suite of business applications
ERP5, a powerful open source ERP / CRM used in Aerospace, Apparel, Banking and for e-government
GNU Mailman, one of the more popular packages for running email mailing lists
MoinMoin, a popular wiki engine
MootiroForm, an open source form creating software
Planet, a feed aggregator
Plone, a user-friendly and powerful open source content management system
Roundup, a bug tracking system
ViewVC, a web-based interface for browsing CVS and SVN repositories
Trac, web-based bug/issue tracking database, wiki, and version control front-end
Python Shell, A Python shell inside the Google Chrome browser.
Turntable.fm, a social media site for interactively sharing music, currently in beta
Perl
I learnt that Perl is a general-purpose programming language developed for text manipulation and now is used for a wide range of tasks including system administration, web development, network programming, and more. The language is intended to be practical. Its major features are that it's easy to use, supports both procedural and object-oriented programming, whilst having powerful built-in support for text processing.
‘It is a high-level, general-purpose, interpreted, dynamic programming language.’
To run the Perl programming/coding this code: perl progname.pl
Or an alternative is this line with the first line: #!/usr/bin/env perl
‘It is a high-level, general-purpose, interpreted, dynamic programming language.’
To run the Perl programming/coding this code: perl progname.pl
Or an alternative is this line with the first line: #!/usr/bin/env perl
Wednesday, 16 November 2011
Exibition Image Descriptions/Ideas
Image Notes:
In the exhibition booklet I found that the images included the following.
Progressive
Showing all their initial ideas and skills
Attention to detail in the visuals and imagery
Eye catching and bold- with the effect to make you look in more detail after first
glance.
Colourful
They all summarise the practitioners skills, telling the audience what they can do .
This helps me understand the practitioners own talents and gain an insight into how they work and what they do.
My own Image plans/ideas:
The images should show my skills and what I can offer a possible client or company in the future. In these five images I want to specifically show that I can do illustration and Graphic design whilst being a web programming in CSS, Html, Javascript and Jquery. Using my own unique style to attract the audience’s attention and express ideas through the five images.
In the exhibition booklet I found that the images included the following.
Progressive
Showing all their initial ideas and skills
Attention to detail in the visuals and imagery
Eye catching and bold- with the effect to make you look in more detail after first
glance.
Colourful
They all summarise the practitioners skills, telling the audience what they can do .
This helps me understand the practitioners own talents and gain an insight into how they work and what they do.
My own Image plans/ideas:
The images should show my skills and what I can offer a possible client or company in the future. In these five images I want to specifically show that I can do illustration and Graphic design whilst being a web programming in CSS, Html, Javascript and Jquery. Using my own unique style to attract the audience’s attention and express ideas through the five images.
50 word statement Ideas
I have so far produced two possible 50 word statements for the exibition caption. These are two ideas that I will work on and develop my final 50 word stateent.
Lars Thurlow uses a range of different skills to produce original desktop and mobile applications. He works in programming and designing web sites that interact with the audience. He has a passion for design incorporating graphics, illustration and programming to develop unique functional websites.
Making original websites that express his ideas, Lars Thurlow uses a range of skills to produce unique designs. He uses graphics, illustration and programming to create mobile and desktop applications, whilst having a passion in design and an eye for detail.
Lars Thurlow uses a range of different skills to produce original desktop and mobile applications. He works in programming and designing web sites that interact with the audience. He has a passion for design incorporating graphics, illustration and programming to develop unique functional websites.
Making original websites that express his ideas, Lars Thurlow uses a range of skills to produce unique designs. He uses graphics, illustration and programming to create mobile and desktop applications, whilst having a passion in design and an eye for detail.
Friday, 11 November 2011
Designing for Interaction: Creating Innovative Applications and Devices (Book)
The book has useful tips for design research to uncover people’s behaviors, motivations, and goals in order to design for them. This helps to understand how responsive websites work and how to create a website that fits within that critera. It also offers interviews and case studies from industry leaders on prototyping, designing in an environment, service design, and more.
A small summary from the book its self.
'Interaction design is all around us. If you’ve ever wondered why your mobile phone looks pretty but doesn’t work well, you’ve confronted bad interaction design. But if you’ve ever marveled at the joy of using an iPhone, shared your photos on Flickr, used an ATM machine, recorded a television show on TiVo, or ordered a movie off Netflix, you’ve encountered good interaction design: products that work as well as they look. Interaction design is the new field that defines how our interactive products behave. Between the technology that powers our devices and the visual and industrial design that creates the products’ aesthetics lies the practice that figures out how to make our products useful, usable, and desirable.'
Saffer, D (14th Aug 2009). Designing for Interaction: Creating Innovative Applications and Devices . 2nd ed. United States of America: New Riders. p1-29.
A small summary from the book its self.
'Interaction design is all around us. If you’ve ever wondered why your mobile phone looks pretty but doesn’t work well, you’ve confronted bad interaction design. But if you’ve ever marveled at the joy of using an iPhone, shared your photos on Flickr, used an ATM machine, recorded a television show on TiVo, or ordered a movie off Netflix, you’ve encountered good interaction design: products that work as well as they look. Interaction design is the new field that defines how our interactive products behave. Between the technology that powers our devices and the visual and industrial design that creates the products’ aesthetics lies the practice that figures out how to make our products useful, usable, and desirable.'
Saffer, D (14th Aug 2009). Designing for Interaction: Creating Innovative Applications and Devices . 2nd ed. United States of America: New Riders. p1-29.
Thursday, 10 November 2011
Human-computer interaction: theory and practice
Author Julie A. Jacko, Constantine Stephanidis
This particular article describes how human interaction used to occur face to face and now has adapt to fit the virtual enviroment in creating this effect in interactive websites. This shows how the world is changing and become more dependant on technology replacing the interaction of human to human to human and computer.
Julie, A (10th April 2003). Human-computer interaction: theory and practice. 2nd ed. Mahwah New Jersey: Lawrence Erlbaum Associates,Inc. p53-62.
Undercover User Experience Design (Book)
This book particulary looks at design methods and how to create a functional website that fits the users needs whilst creating a user friendly experince. This didnt contain all the materail I was looking to gain in this area but offered ideas and some termonolgy of how websites are created to fit the users needs. This gave me an insight in to how certain aspects within the design can make a responsive website attarct more browsers and be more successful in engaging the user.
Bowles, C (17 Sep 2010). Undercover User Experience Design. United States of America: New Riders. p52-64.
Bowles, C (17 Sep 2010). Undercover User Experience Design. United States of America: New Riders. p52-64.
Eyetracking and Usability (book)
Eyetracking Web Usability is a book I looked at as part of my research, it is based on the studies of eyetracking usability in existence. This is from aurthor Jakob Nielsen and coauthor Kara Pernice. It looks at how human eyes interact with design within web. Their findings help understand what people see or don’t see, when they look, and why.They also discovered important new user behaviors that are revealed here for the first time. Using compelling eye gaze plots and heat maps,demonstrating why some designs work and others don’t. They also provide valuable advice for page layout, navigation menus, site elements, image selection, and advertising. This book is essential reading for anyone who is serious about doing business on the Web.
Nielsen, J (1 Dec 2009). Eyetracking Web Usability . United States of America: New Riders. p10-18 and 70-74.
Nielsen, J (1 Dec 2009). Eyetracking Web Usability . United States of America: New Riders. p10-18 and 70-74.
Tuesday, 8 November 2011
Article Supporting Research project
The title is: Reach beyond use and usability and focus on impact by combining marketing and interaction design to improve academic website development.
Below is a slight summary of the article I have looked at. To create a sucessful website it must be an engaging, user-focused site that gathers needed data and advances organizational goals is not simple. To do so effectively requires a willingness to approach a website development project in a way that capitalizes on both interaction design and marketing principles.
Below is a slight summary of the article I have looked at. To create a sucessful website it must be an engaging, user-focused site that gathers needed data and advances organizational goals is not simple. To do so effectively requires a willingness to approach a website development project in a way that capitalizes on both interaction design and marketing principles.
Journal piece that supports Research project
The title of the journal is, Opinion piece: Social media: Should marketers engage and how can it be done effectively?
This journal supports the idea that to engage with the customer or browser offers more possibilities and a better experience a quote specifically stood out was ‘Online advertising has been criticized for its creative limitations for years, but changes in the internet landscape have created new opportunities to engage with customers in ways not possible through offline channels. This particularly shows how technology and the internet have enhanced and improved aspects of the advertising world by using interaction to connect with the users.
This journal supports the idea that to engage with the customer or browser offers more possibilities and a better experience a quote specifically stood out was ‘Online advertising has been criticized for its creative limitations for years, but changes in the internet landscape have created new opportunities to engage with customers in ways not possible through offline channels. This particularly shows how technology and the internet have enhanced and improved aspects of the advertising world by using interaction to connect with the users.
Friday, 4 November 2011
Assignment 2: Image 1 Idea
This is one of my image ideas for the assignment two project. The idea is to show that I have a passion for design and creating web applications, whilst doing illustration and my own style of drawing in biro and pen.
Tuesday, 1 November 2011
Zach Gold - Photographer
Zach Gold is a photographer for the “Life Hurts” campaign for Dickies this is a range of images. The workwear company has been making tough, durable clothes for workmen. Their latest campaign highlights their heritage, claiming as a slogan “When Life Hurts, Dickies Endures.” The work shows scenes where the worker is at the worst situation. The photos them self are very powerful motion shots in black and white with the Dickies Logo in colour make their brand stand out from the imagery. The grayscale effect adds more definition and detail to the specific scenes of disaster. Here is a few of the photographers work for the campaign.
Web Template in hand-drawn sketchy graphics
This design was a blog style template I found on webdesigner mag website. I discovered it whilst looking into different web applications and designs within the graphic sector of wbedesign. Below it the sketch style home page. I specifcally like the use of a varied palate of colours in a collage of visuals. I hope to achieve a simular effect on an upcoming project but in my own style of illustration.
This is a close up shot of one of the other images.
This is a close up shot of one of the other images.
