edge903 task4
TRANSCRIPT
![Page 1: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/1.jpg)
Gestalt theory and website design
by Amani Alanazi3139566
EDGE903 Spring09
![Page 2: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/2.jpg)
Outline
1- Why use Gestalt for web design?
2- The Gestalt laws
3-Tips for effective web design for your course
4- References
![Page 3: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/3.jpg)
- Gestalt theory is simply a scientific foundation describing how the mind organizes visual data. The stronger the clarity of form, the better the design.”
http://www.firstcoastcreative.net/index.php?p=18
- Gestalt is “not a combination of elements but something new in relation to these, which exists together in their combination, but it distinguishable from it” (Lyons, 2001)
1. Why use Gestalt for web design?
![Page 4: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/4.jpg)
1-Why use Gestalt for web design?
- Usability: using white space to effectively distinguish between elements.
- Easily scanned designs.
- Accessibility: easier for those who are visually impaired to understand a page.
![Page 5: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/5.jpg)
2. The Gestalt laws
• 2-1. Similarity• 2-2. Proximity• 2-3. simplicity• 2-4. Good continuation• 2-5. Closure
![Page 6: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/6.jpg)
2-1. Similarity
Objects that are similar, with like components or attributes are more likely to be organised together (Schamber, 1986).
![Page 7: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/7.jpg)
2-2. Proximity
The closer objects are to each other, the more likely they are to be perceived as a group
![Page 8: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/8.jpg)
2-3. simplicity (Symmetry)
people will visualise according to the simplest way of grouping items – and the effort to simplify complex items is unconscious (Chang, 2002).
![Page 9: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/9.jpg)
2-4. Good continuation
Objects will be grouped as a whole if they are co-linear, or follow a direction (Chang, 2002)
![Page 10: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/10.jpg)
2-5. Closure
In perception there is the tendency to complete unfinished or partially obscured objects.
![Page 11: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/11.jpg)
Similarity/Proximity
Proximity/SimilarityGood Continuation
An example of a website using Gestalt laws…
![Page 12: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/12.jpg)
3-Tips for effective web design for your course
A- make it simple.
B- Maintain Webpage Design Consistency across the Website.
C- Avoid too many Flashy Graphics and Animations.
D- keep the background white
E- clear site structure
![Page 13: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/13.jpg)
3.a- make it simple ( don’t crowd your website designs with unnecessary images)
![Page 14: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/14.jpg)
3.b- Maintain Webpage Design Consistency across the Website
Ensure your WebPages are consistency, This will help with viewer comfort when browsing your website.
![Page 15: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/15.jpg)
3. c-Avoid too many Flashy Graphics and Animations
Too many flashy graphics and animations can distract the viewer from the content of your website
![Page 16: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/16.jpg)
3.d- keep your website’s background white
( which make the text information on your website to stand
out and be readable)
![Page 17: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/17.jpg)
3.e- make the site’s structure easy to follow
![Page 18: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/18.jpg)
Remember to be your self
![Page 19: EDGE903 task4](https://reader036.vdocuments.net/reader036/viewer/2022062418/5557ddd7d8b42af2178b4edf/html5/thumbnails/19.jpg)
References
Chang, D., Dooley, L., & Tuovinen, J. E. (2002). Gestalt Theory in Visual Screen Design – A New Look at an Old Subject. Paper presented at 7th World Conference on Computers in Education, 29th July – 3rd August, Australian Computer Society, Copenhagen
Schamber, L. (1986, August). A Content-Driven Approach to Visual Literacy: Gestalt Rediscovered. Paper presented at 69th Annual Meeting of the Association for Education in Journalism and Mass Communications, Visual Communications Division, Norman, Oklahoma.
Lyons, A. (2001). Gestalt Approaches to the Virtual Gesantkunstwerk. Unpublished Paper. from http://www.tstex.com/gestalt.htm
http://www.netstarter.com.au/Content_Common/pg-web-site-design-tips-sydney.seo
http://shannonebarry.blogspot.com/2008/12/dare-to-be-yourself.html