ABSTRACT
In this study, new web site of Gazi University of which design was changed and came into service in November 2009 is examined in terms of graphic design principles and availability. Examining design quality and availability factors is important in order to determine whether users’ expectations and needs are properly met by the web site which will be visited by more than 50.000 students of the university. The purpose of the article is to perform this examination.
Keywords : Gazi University, Graphic Design, Web Design, Availability
Introduction
As of today, Gazi University has 15 faculties, 5 colleges, 9 vocational colleges, 26 research centers and 6 institutes that continue education and training. In addition to these units, it has clubs, student clubs, printed and periodical publications, radio and everlasting events.
It has more than 50.000 students who attend and involve in all these academic units, clubs and events. Web site has a big role in providing fast and correct information and service for students, academic staff, officers and external visitors of the site.
Web site should provide simple and fast reach to events, news and announcements within the university. It should be able to provide correct direction and information not only for academic staff and students but also for people who will meet new with the university. Information on the site should be able to respond to all questions that may come into mind to know about university. The website of university should be able to show the success in the same way as of the university in education.
Graphic design and availability are the most important elements for the web site to serve all these objectives described in a fast and efficient way. Correct use of graphic design elements in web site design provides an easily-remembered site and navigation without disturbing user visually. Moreover, graphic design has a direct influence on the availability of the site. Availability makes the site easier to use for the user by providing requested information to reach to the user as easy and soon as possible.
Graphic Design in Web Sites
Internet is the world's most common and the largest computer-based communication network that is used by millions of people. Internet is a free medium of communication with its content and features. It is easy to use, economical, very flexible in terms of space and time. As compared to other communication ways, it is more successful to reach the target audience. All desired subject can be presented and shared in desired style. All these useful opportunities can reach its goal with a good planning and design.
Many people who are fascinated by this global network that provides text, image and audio data to reach computer users, make web site and cause some visual pollution unconsciously. If the aim is to create interesting, informative and visually effective pages, it is necessary to have some specific design knowledge. No doubt there are no obstacles for people who want to make web page as amateurs. But to minimize the visual pollution, it is beneficial for them to consider some principles and recommendations. (1)
Composition in Web Site Design
Composition is the part that integrity, hierarchy and highlight of the design is planned. A correctly set up composition on a website maintains an easy understanding of the site and its continuity. It provides for the eye to follow the movement on the page without difficulty according to the flow of the information. Composition in a site design should be considered together with the text, images, colours, spaces in the content and medium as a whole.
Irregularly placed text and image elements makes perception and communication difficult and causes misunderstanding. Good visual balance between texts and images should be established. Colours, shapes and their placement must be balanced, it should attract attention.(2)
Negative-Positive Spaces (Blanks) in Web Site Design
In design, text, colour, image are defined as positive space, blanks are defined as negative space. Blanks determine the integrity of the design and flow direction. In a design without any blanks, user will get lost among the visuals and writings. This reduces readability of the design and causes deviation from its purpose. As composition preperation in web site design, empty spaces should be considered and valued well. It has a big role in hierarchical structure. Much space left between two paragraphs makes a difficult transition to the next paragraph for the reader.
It is known that internet users visit web sites by using different monitors and screen resolutions. This situation should be considered in calculation of spaces in design. Prepared site should be tested with different monitors and screen resolutions. Especially in low screen resolutions, easy read of the site and enough space around the design should be checked.
Colour Usage in Web Site Design
Colour is almost as important as content and navigation in terms of defining success of a site and is an effective element of design. Colour does not only add visual appeal to the site but also is important in terms of message that gives to the target audience. Reactions to colour depends on many factors. For example, for colour-blind users availability is important. Colour symbolism may vary dramatically between cultures.
In the use of colours in screen design, “Colour Information” should be used. Colour and graphics on the screen relevant to the subject should awake interest of the learner and a suitable colour composition in terms of highlight and visualability should be established by background colour. Bright and light colours should be used when important elements are desired to be highlighted. Font colour and background colour that makes easy for learner to read or see, should be chosen among colours that provide good contrast. (Bülbül, 1999). However, number of colours on the screen should be careful not to exceed four (Yalın, 2000:99)
Visual Usage in Web Design
This is an important part of web design and often the sine qua non. Visuals may be photograph, illustration, drawing or animation. Regardless of which visual is used, it should not be excessive in the use. Visual usage stands out intensively in internet. In gallery pages, news pages, education sites etc.
Used in the right place, visuals may send message and information more than text to the user. It is important to use carefully and suitable for general design. Misuse of it may result that user may not receive necessary information from the page and it may cause dissatisfaction. Sizes should be set carefully too. Wrong sized and large pictures may slow down and even fail to open the site.
As preparing design, visuals should be used by considering together with composition and hierarchy in terms of both as a positive space and colour scheme.
Typography Usage in Web Design
The art-design of placing typefaces on a two-dimensional surface is called “typography”. Typography provides writing to push the limits of logic, keeps attention alive, caresses human spirit, infuriates, excites. Therefore, the designer's slogan should be; "simple, effective and deep". Web pages should be “easy/simple” with easy usage and detect, “effective” with efficient and useful information, “deep” with response to all questions and enthusiasm that it will create. (3)
Diversity of fonts should be according to requirements. If the page is big, text is long and different highlights are needed, diversity in writing brings prosperity and liveliness. Too many fonts are always risk. If the font of writing is too big then the number of words that will be perceived at every glance reduces. If it is too small then the letters become indistinguishable. For a reading distance of 30-35 cm, average font size is equivalent to the 9-11 points.
Availability in Web Sites
Availability; according to the definition of International Standardization Organization (ISO), is associated with effectiveness, efficiency and satisfaction criteria. Effectiveness is the degree of reaching the goal by determination of using a system. Efficiency is a measure of resources that should be spent to reach these goals. Satisfaction is the user’s degree of evaluating system as acceptable. (4).
Nielsen described availability as a combination of factors that effect user’s interaction with a product or system (5). By taking these factors into consideration at the design stage, it becomes possible to design more usable systems. These factors are:
• Easy learnability
• Effective availability
• Easy to remember
• Low failure rate
• User satisfaction
The aim in availability is to design the site in a manner appropriate to the expectations and needs of visitors. Students are able to follow course schedules and notes over university sites. In such a case, as a site with low availability cannot fulfill the functions, student may have to go to student affairs office for example. As a result, extra time and means will have to be spent for information that can be acquired in a very short period over the internet.
Gazi University Web Site In Terms of Graphic Design
As compared to the previous design, the new web site design of the university appears to be simpler and more understandable. The amount of used visual has been reduced. Quick links section has been turned into headlines and logo and images that were earlier in this section have been removed from the home page. In this way, more space was created on the page that can be used. All sections in homepage were organized under headlines and a possible writing density in the first page yet is prevented. Many pages can be easily accessed from the home page, such as academic and administrative units, introduction, transportation and communication information, library, social units, news and announcements.
Design that is used in home page is used as concept in other pages too. A continuity has been provided in all site.
Text, colour and images have been brought together in a simple composition in the site. As elements of graphic design, these elements will be examined in separate headings.
• Composition
In the composition created in the homepage, university logo and name is used at the top of the page, on the left side on a white background. There is university's slogan just under it. On upper right corner of the page, a visual image contains a photograph of Ataturk and picture of the Turkish flag is located. Date and education period information, site map link and English language option shortcut are located on this visual in a readable way. Search engine of the site is located right at the top of the page.
Hierarchical structure is arranged in a flow direction to be followed by top-down. All of the completed form with a square design is divided into 4 pieces.
First piece is comprised of a menu that contains general information about university, Academic and Administrative Departments and links to the Information Systems. This menu is an open menu prepared by Flash programme. As pointed with the mouse, it provides a comfortable use.
Second piece is comprised of Quick Links and the link of electronic mail application of the university. Shortcuts in quick links are prepared by using headings. This is an easily readable and fast used section. Moreover it contributes to the fast use as it is in the second place in hierarchical structure. In previous site design, quick links were prepared by using the logo of each unit at the bottom of the page side by side. And as the logos of all links were reduced to be fitted into limited space, they became all difficult to read. Crowd of colour as a result had a negative effect on the whole page. The use in the new design has helped to gain more space on the page.
Third piece is comprised of an animation that contains photos of university and events and the links of Library, Gazi News, EU Programmes, Magazines, Social Units and Distance Education just below that. Each link has been supported with a small visual that is appropriate to its content. Animation size, compared to all design, is prepared 1/2 vertically and 1/3 horizontally.
Fourth piece is comprised of Communication-Transportation Information, Announcements and News sections. This section is divided into 3 equal pieces and prepared by leaving blanks that creates spaciousness in design. An institutional motion was made at the design by using university logo in a transparent way under communication information. Approximately 1/3 part of luxury was left blank at the bottom of the section and the background continued to the limit of the page. In the bottom right, RSS (Real Simple Syndication) link and in the bottom Gazi University Rectorate - IT Head of Department post is located in blue colour.
Amount of colours used in the design has been kept low. The colours used are compatible and provide a live view.
The same design continues in the other pages of the site too. Depending on the content of the visited page, a redirecting menu that contains page content on the right side and important links of the site on the left side is used. Unlike the home page, white background colour is used. A frame that complements the page on the right and top side is used.
As the site's new design was examined in general, it is observed that it is designed carefully and in accordance with the principles of graphic design.
• Negative-Positive Spaces (Blank)
The space that site design covers and the blank around it has been tested with different monitors and screen resolutions. As a result of the trials, it has been observed that design size was prepared by taking low resolution into consideration. In the pictures below, the views of the site with some generally used resolutions are seen.
Homepage design is applied on dark background colour. Therefore we can mention spaces between text and visuals as blank inside itself as a whole. Writings and distance of writings to the sides provide easy readability. White spaces are used that separate animation and the below links both from each other and from all page.
It can be seen that the use of space provide a comfortable reading in other pages too. According to different contents, texts and visuals are placed at sufficient distance to each other not to interfere.
• Colour Usage
On page design, university logo and name are used on white background in their original colours. Mainly turquoise and its tons are used in site design. Turquoise has provided a soft and calm style in the design. With the use of white in the writings, this soft style is completed. Turquoise colour has invigorating and refreshing psychological characteristics.
Pastel tones are used in the second section at homepage and as background colour of links that is used in menus at other pages. Tones that are compatible with turquoise, which we can call as the main colour of the site, are selected. White is again used for shortcut writings.
In the long texts and list texts that change according to the page content, black is used on white background. In this usage style, contrast of text colour with the background colour should be 70% to 30% rate or vice versa for ease of reading. It is known that this value irritates eyes as it is 100% to 0%. In addition, the brightness of the monitor light increases this effect too.
In the studies that were made with photoshop software on sample pages taken from the site, it was seen that black in writings is used in 75% rate. It is seen that ease of reading was considered as preparing design.
The colours used in web design can vary in different browser programs. For example, the colours of a site that is opened with Internet Explorer may be seen different in other browser programs such as Firefox, Opera or Safari. Colour differences in sites also may be caused from the used monitor or MAC or PC usage.
To resolve the differences caused from the browser, one of 216 colours that don’t change according to the browser may be used. To easily identify the colours that are not affected by browser, the rule of RGB (red, green, blue) values of colours always to have 51 times can be used. In other words, if all three values can be divided by 51 then colour is browser-based invariant. However HTML language needs hexadecimal number system (hex) values. In this case, according to this rule hexadecimal number system values can only contain 00, 33, 66, 99, CC and FF (Weinman, 2002; Merchant, 2000; Mlawer, 2000). (6)
In the following pictures, there are images of Gazi University web site from the browsers Internet Explorer, Firefox and Safari(MAC). When site is visited with different browsers, no big colour differences is observed.
• Visual Usage
Succinct visual usage is observed in site design. University logo, Ataturk photograph and Turkish flag are located on the top of all pages. Ataturk photograph is used in a size that can be recognized easily.
In the design, remarkable small arrow images in orange tones are used to increase the emphasis on headline writings and links.
The most intensive use of visuals is in the third section which contains animation and the links below. 13 photographs are used in the animation. Among these photographs, there are rectorate building, student imagery, library, class imagery and pictures from the events such as theater, workshop. All photographs are used in full size and not deformed in any way. In terms of photographic values, they are professional photos with good lighting and framing settings. The old photograph of rectorate building is used both in the animation and on the background of all site as transparent.
Below the animation section, there are visuals that are used together with shortcuts. As these visuals are examined, it is seen that they are effective and appropriate pictures which describe the content of the together used shortcut.
• Typography Usage
Two fonts that are used in all site can be observed. Verdana font is used in long texts, lists and big part of links. Times New Roman font is used in the first section at homepage and in redirecting menu in other pages.
In the used fonts, point value is not greater than 12. And the smallest usage is 8 point. The site's visitors and target audience are adults. 9-11 points is accepted as the smallest value that an adult can easily read from a 30-35 cm distance from the monitor. According to this, there is no difficulty of reading with the help of appropriate space values in typographic structure too.
Blocking is prepared as left aligned in heading, shortcut and list writings. In long texts it is both left and right aligned.
Font that is used in long texts is without serif. On the contrary, fonts with serif are recommended in long texts due to ease of following. However by chosing appropriate space values and font, it is possible that fonts without serif can also be read as easy as fonts with serif. The use in this site can be given as an example of this situation.
Gazi University Web Site In Terms of Availability
Visitors of Gazi University web site are intended to reach information easy and fast. Information organization within the site and site architecture is not complicated. Any requested page can be easily accessed with the help of links that run seamlessly and accurately. Site control can be easily done with the help of redirecting menus that every page contains.
It is easy to use both for Turkish and foreign visitors with the help of purpose appropriate language use.
Availability of detailed search engine and its seamlessly running offers ability of survey through the site.
It is prepared with PHP (Personal Home Page) programming language. Therefore it has a structure that it can compensate possible intensive process traffic on the site without any data loss. Moreover an independent anti-virus program was put into service on the site. The safety of both visitors and the information on the site has been provided with the help of this program.
News published on the site are transferred to RSS (Real Simple Syndication) channel service. With the help of RSS, visitors are able to follow university news and announcements live without visiting site, by installing programmes on their computer desktop instead. It is possible to follow via RSS compatible cell phones and televisions too.
The depth of Gazi University new site is 2 units. The depth of web sites is determined by the number of new pages that is opened with each click from the homepage. All links in university site are 1 page depth and after that they are seperated from home site and switch to relevant site of that unit. Browsing and functionality can be achieved successfully in portal logic sites that have low depth.
Finally new site design of Gazi University has become a fast and easy-structured portal that can introduce all units of university seamlessly to visitors.
Conclusion and Recommendations
• In web site design, continuity relationship should be established between visual elements
• Graphics design elements should be used in a balanced way in web site design and hierarchical structure should be established within integrity.
• In web site design, readability should be especially considered in typography use
• Links and redirects should be simple and understandable in web sites.
• As preparing web sites, trials should be made by different computers, browsers and screen resolutions.
• Site designs of educational institutions such as üniversity should be especially in a way that supports the principles of design structure and should be exemplary.
In this study, new web site of Gazi University of which design was changed and came into service in November 2009 is examined in terms of graphic design principles and availability. Examining design quality and availability factors is important in order to determine whether users’ expectations and needs are properly met by the web site which will be visited by more than 50.000 students of the university. The purpose of the article is to perform this examination.
Keywords : Gazi University, Graphic Design, Web Design, Availability
Introduction
As of today, Gazi University has 15 faculties, 5 colleges, 9 vocational colleges, 26 research centers and 6 institutes that continue education and training. In addition to these units, it has clubs, student clubs, printed and periodical publications, radio and everlasting events.
It has more than 50.000 students who attend and involve in all these academic units, clubs and events. Web site has a big role in providing fast and correct information and service for students, academic staff, officers and external visitors of the site.
Web site should provide simple and fast reach to events, news and announcements within the university. It should be able to provide correct direction and information not only for academic staff and students but also for people who will meet new with the university. Information on the site should be able to respond to all questions that may come into mind to know about university. The website of university should be able to show the success in the same way as of the university in education.
Graphic design and availability are the most important elements for the web site to serve all these objectives described in a fast and efficient way. Correct use of graphic design elements in web site design provides an easily-remembered site and navigation without disturbing user visually. Moreover, graphic design has a direct influence on the availability of the site. Availability makes the site easier to use for the user by providing requested information to reach to the user as easy and soon as possible.
Graphic Design in Web Sites
Internet is the world's most common and the largest computer-based communication network that is used by millions of people. Internet is a free medium of communication with its content and features. It is easy to use, economical, very flexible in terms of space and time. As compared to other communication ways, it is more successful to reach the target audience. All desired subject can be presented and shared in desired style. All these useful opportunities can reach its goal with a good planning and design.
Many people who are fascinated by this global network that provides text, image and audio data to reach computer users, make web site and cause some visual pollution unconsciously. If the aim is to create interesting, informative and visually effective pages, it is necessary to have some specific design knowledge. No doubt there are no obstacles for people who want to make web page as amateurs. But to minimize the visual pollution, it is beneficial for them to consider some principles and recommendations. (1)
Composition in Web Site Design
Composition is the part that integrity, hierarchy and highlight of the design is planned. A correctly set up composition on a website maintains an easy understanding of the site and its continuity. It provides for the eye to follow the movement on the page without difficulty according to the flow of the information. Composition in a site design should be considered together with the text, images, colours, spaces in the content and medium as a whole.
Irregularly placed text and image elements makes perception and communication difficult and causes misunderstanding. Good visual balance between texts and images should be established. Colours, shapes and their placement must be balanced, it should attract attention.(2)
Negative-Positive Spaces (Blanks) in Web Site Design
In design, text, colour, image are defined as positive space, blanks are defined as negative space. Blanks determine the integrity of the design and flow direction. In a design without any blanks, user will get lost among the visuals and writings. This reduces readability of the design and causes deviation from its purpose. As composition preperation in web site design, empty spaces should be considered and valued well. It has a big role in hierarchical structure. Much space left between two paragraphs makes a difficult transition to the next paragraph for the reader.
It is known that internet users visit web sites by using different monitors and screen resolutions. This situation should be considered in calculation of spaces in design. Prepared site should be tested with different monitors and screen resolutions. Especially in low screen resolutions, easy read of the site and enough space around the design should be checked.
Colour Usage in Web Site Design
Colour is almost as important as content and navigation in terms of defining success of a site and is an effective element of design. Colour does not only add visual appeal to the site but also is important in terms of message that gives to the target audience. Reactions to colour depends on many factors. For example, for colour-blind users availability is important. Colour symbolism may vary dramatically between cultures.
In the use of colours in screen design, “Colour Information” should be used. Colour and graphics on the screen relevant to the subject should awake interest of the learner and a suitable colour composition in terms of highlight and visualability should be established by background colour. Bright and light colours should be used when important elements are desired to be highlighted. Font colour and background colour that makes easy for learner to read or see, should be chosen among colours that provide good contrast. (Bülbül, 1999). However, number of colours on the screen should be careful not to exceed four (Yalın, 2000:99)
Visual Usage in Web Design
This is an important part of web design and often the sine qua non. Visuals may be photograph, illustration, drawing or animation. Regardless of which visual is used, it should not be excessive in the use. Visual usage stands out intensively in internet. In gallery pages, news pages, education sites etc.
Used in the right place, visuals may send message and information more than text to the user. It is important to use carefully and suitable for general design. Misuse of it may result that user may not receive necessary information from the page and it may cause dissatisfaction. Sizes should be set carefully too. Wrong sized and large pictures may slow down and even fail to open the site.
As preparing design, visuals should be used by considering together with composition and hierarchy in terms of both as a positive space and colour scheme.
Typography Usage in Web Design
The art-design of placing typefaces on a two-dimensional surface is called “typography”. Typography provides writing to push the limits of logic, keeps attention alive, caresses human spirit, infuriates, excites. Therefore, the designer's slogan should be; "simple, effective and deep". Web pages should be “easy/simple” with easy usage and detect, “effective” with efficient and useful information, “deep” with response to all questions and enthusiasm that it will create. (3)
Diversity of fonts should be according to requirements. If the page is big, text is long and different highlights are needed, diversity in writing brings prosperity and liveliness. Too many fonts are always risk. If the font of writing is too big then the number of words that will be perceived at every glance reduces. If it is too small then the letters become indistinguishable. For a reading distance of 30-35 cm, average font size is equivalent to the 9-11 points.
Availability in Web Sites
Availability; according to the definition of International Standardization Organization (ISO), is associated with effectiveness, efficiency and satisfaction criteria. Effectiveness is the degree of reaching the goal by determination of using a system. Efficiency is a measure of resources that should be spent to reach these goals. Satisfaction is the user’s degree of evaluating system as acceptable. (4).
Nielsen described availability as a combination of factors that effect user’s interaction with a product or system (5). By taking these factors into consideration at the design stage, it becomes possible to design more usable systems. These factors are:
• Easy learnability
• Effective availability
• Easy to remember
• Low failure rate
• User satisfaction
The aim in availability is to design the site in a manner appropriate to the expectations and needs of visitors. Students are able to follow course schedules and notes over university sites. In such a case, as a site with low availability cannot fulfill the functions, student may have to go to student affairs office for example. As a result, extra time and means will have to be spent for information that can be acquired in a very short period over the internet.
Gazi University Web Site In Terms of Graphic Design
As compared to the previous design, the new web site design of the university appears to be simpler and more understandable. The amount of used visual has been reduced. Quick links section has been turned into headlines and logo and images that were earlier in this section have been removed from the home page. In this way, more space was created on the page that can be used. All sections in homepage were organized under headlines and a possible writing density in the first page yet is prevented. Many pages can be easily accessed from the home page, such as academic and administrative units, introduction, transportation and communication information, library, social units, news and announcements.
Design that is used in home page is used as concept in other pages too. A continuity has been provided in all site.
Text, colour and images have been brought together in a simple composition in the site. As elements of graphic design, these elements will be examined in separate headings.
• Composition
In the composition created in the homepage, university logo and name is used at the top of the page, on the left side on a white background. There is university's slogan just under it. On upper right corner of the page, a visual image contains a photograph of Ataturk and picture of the Turkish flag is located. Date and education period information, site map link and English language option shortcut are located on this visual in a readable way. Search engine of the site is located right at the top of the page.
Hierarchical structure is arranged in a flow direction to be followed by top-down. All of the completed form with a square design is divided into 4 pieces.
First piece is comprised of a menu that contains general information about university, Academic and Administrative Departments and links to the Information Systems. This menu is an open menu prepared by Flash programme. As pointed with the mouse, it provides a comfortable use.
Second piece is comprised of Quick Links and the link of electronic mail application of the university. Shortcuts in quick links are prepared by using headings. This is an easily readable and fast used section. Moreover it contributes to the fast use as it is in the second place in hierarchical structure. In previous site design, quick links were prepared by using the logo of each unit at the bottom of the page side by side. And as the logos of all links were reduced to be fitted into limited space, they became all difficult to read. Crowd of colour as a result had a negative effect on the whole page. The use in the new design has helped to gain more space on the page.
Third piece is comprised of an animation that contains photos of university and events and the links of Library, Gazi News, EU Programmes, Magazines, Social Units and Distance Education just below that. Each link has been supported with a small visual that is appropriate to its content. Animation size, compared to all design, is prepared 1/2 vertically and 1/3 horizontally.
Fourth piece is comprised of Communication-Transportation Information, Announcements and News sections. This section is divided into 3 equal pieces and prepared by leaving blanks that creates spaciousness in design. An institutional motion was made at the design by using university logo in a transparent way under communication information. Approximately 1/3 part of luxury was left blank at the bottom of the section and the background continued to the limit of the page. In the bottom right, RSS (Real Simple Syndication) link and in the bottom Gazi University Rectorate - IT Head of Department post is located in blue colour.
Amount of colours used in the design has been kept low. The colours used are compatible and provide a live view.
The same design continues in the other pages of the site too. Depending on the content of the visited page, a redirecting menu that contains page content on the right side and important links of the site on the left side is used. Unlike the home page, white background colour is used. A frame that complements the page on the right and top side is used.
As the site's new design was examined in general, it is observed that it is designed carefully and in accordance with the principles of graphic design.
• Negative-Positive Spaces (Blank)
The space that site design covers and the blank around it has been tested with different monitors and screen resolutions. As a result of the trials, it has been observed that design size was prepared by taking low resolution into consideration. In the pictures below, the views of the site with some generally used resolutions are seen.
Homepage design is applied on dark background colour. Therefore we can mention spaces between text and visuals as blank inside itself as a whole. Writings and distance of writings to the sides provide easy readability. White spaces are used that separate animation and the below links both from each other and from all page.
It can be seen that the use of space provide a comfortable reading in other pages too. According to different contents, texts and visuals are placed at sufficient distance to each other not to interfere.
• Colour Usage
On page design, university logo and name are used on white background in their original colours. Mainly turquoise and its tons are used in site design. Turquoise has provided a soft and calm style in the design. With the use of white in the writings, this soft style is completed. Turquoise colour has invigorating and refreshing psychological characteristics.
Pastel tones are used in the second section at homepage and as background colour of links that is used in menus at other pages. Tones that are compatible with turquoise, which we can call as the main colour of the site, are selected. White is again used for shortcut writings.
In the long texts and list texts that change according to the page content, black is used on white background. In this usage style, contrast of text colour with the background colour should be 70% to 30% rate or vice versa for ease of reading. It is known that this value irritates eyes as it is 100% to 0%. In addition, the brightness of the monitor light increases this effect too.
In the studies that were made with photoshop software on sample pages taken from the site, it was seen that black in writings is used in 75% rate. It is seen that ease of reading was considered as preparing design.
The colours used in web design can vary in different browser programs. For example, the colours of a site that is opened with Internet Explorer may be seen different in other browser programs such as Firefox, Opera or Safari. Colour differences in sites also may be caused from the used monitor or MAC or PC usage.
To resolve the differences caused from the browser, one of 216 colours that don’t change according to the browser may be used. To easily identify the colours that are not affected by browser, the rule of RGB (red, green, blue) values of colours always to have 51 times can be used. In other words, if all three values can be divided by 51 then colour is browser-based invariant. However HTML language needs hexadecimal number system (hex) values. In this case, according to this rule hexadecimal number system values can only contain 00, 33, 66, 99, CC and FF (Weinman, 2002; Merchant, 2000; Mlawer, 2000). (6)
In the following pictures, there are images of Gazi University web site from the browsers Internet Explorer, Firefox and Safari(MAC). When site is visited with different browsers, no big colour differences is observed.
• Visual Usage
Succinct visual usage is observed in site design. University logo, Ataturk photograph and Turkish flag are located on the top of all pages. Ataturk photograph is used in a size that can be recognized easily.
In the design, remarkable small arrow images in orange tones are used to increase the emphasis on headline writings and links.
The most intensive use of visuals is in the third section which contains animation and the links below. 13 photographs are used in the animation. Among these photographs, there are rectorate building, student imagery, library, class imagery and pictures from the events such as theater, workshop. All photographs are used in full size and not deformed in any way. In terms of photographic values, they are professional photos with good lighting and framing settings. The old photograph of rectorate building is used both in the animation and on the background of all site as transparent.
Below the animation section, there are visuals that are used together with shortcuts. As these visuals are examined, it is seen that they are effective and appropriate pictures which describe the content of the together used shortcut.
• Typography Usage
Two fonts that are used in all site can be observed. Verdana font is used in long texts, lists and big part of links. Times New Roman font is used in the first section at homepage and in redirecting menu in other pages.
In the used fonts, point value is not greater than 12. And the smallest usage is 8 point. The site's visitors and target audience are adults. 9-11 points is accepted as the smallest value that an adult can easily read from a 30-35 cm distance from the monitor. According to this, there is no difficulty of reading with the help of appropriate space values in typographic structure too.
Blocking is prepared as left aligned in heading, shortcut and list writings. In long texts it is both left and right aligned.
Font that is used in long texts is without serif. On the contrary, fonts with serif are recommended in long texts due to ease of following. However by chosing appropriate space values and font, it is possible that fonts without serif can also be read as easy as fonts with serif. The use in this site can be given as an example of this situation.
Gazi University Web Site In Terms of Availability
Visitors of Gazi University web site are intended to reach information easy and fast. Information organization within the site and site architecture is not complicated. Any requested page can be easily accessed with the help of links that run seamlessly and accurately. Site control can be easily done with the help of redirecting menus that every page contains.
It is easy to use both for Turkish and foreign visitors with the help of purpose appropriate language use.
Availability of detailed search engine and its seamlessly running offers ability of survey through the site.
It is prepared with PHP (Personal Home Page) programming language. Therefore it has a structure that it can compensate possible intensive process traffic on the site without any data loss. Moreover an independent anti-virus program was put into service on the site. The safety of both visitors and the information on the site has been provided with the help of this program.
News published on the site are transferred to RSS (Real Simple Syndication) channel service. With the help of RSS, visitors are able to follow university news and announcements live without visiting site, by installing programmes on their computer desktop instead. It is possible to follow via RSS compatible cell phones and televisions too.
The depth of Gazi University new site is 2 units. The depth of web sites is determined by the number of new pages that is opened with each click from the homepage. All links in university site are 1 page depth and after that they are seperated from home site and switch to relevant site of that unit. Browsing and functionality can be achieved successfully in portal logic sites that have low depth.
Finally new site design of Gazi University has become a fast and easy-structured portal that can introduce all units of university seamlessly to visitors.
Conclusion and Recommendations
• In web site design, continuity relationship should be established between visual elements
• Graphics design elements should be used in a balanced way in web site design and hierarchical structure should be established within integrity.
• In web site design, readability should be especially considered in typography use
• Links and redirects should be simple and understandable in web sites.
• As preparing web sites, trials should be made by different computers, browsers and screen resolutions.
• Site designs of educational institutions such as üniversity should be especially in a way that supports the principles of design structure and should be exemplary.
ÖZET
Bu çalışmada, Gazi Üniversitesi’nin 2009 yılı Kasım ayında tasarımı değişen ve hizmete giren yeni websitesi, grafik tasarım ilkeleri ve kullanılabilirlik açısından incelenmiştir. Üniversitenin 50.000 den fazla öğrencisinin ziyaret edeceği web sitesinin, kullanıcıların beklenti ve ihtiyaçlarını uygun şekilde karşıladığını belirlemede, tasarım niteliklerinin ve kullanılabilirlik faktörlerinin incelenmesi önemlidir. Makalenin amacı bu incelemeyi gerçekleştirmektir.
Giriş
Gazi Üniversitesi bugün itibariyle bünyesinde, eğitim ve öğretimini sürdüren 15 fakülte, 5 yükse okul, 9 meslek yüksek okulu, 26 araştırma merkezi ve 6 enstitü bulundurmaktadır. Bu birimlere ek olarak, kulüpler, öğrenci kulüpleri, basılı ve süreli yayınları, radyosu ve sürekli etkinlikleri bulunmaktadır.
Tüm bu akademik birimlere, kulüplere ve etkinliklere devam eden ve katılan 50.000 den fazla öğrencisi vardır. Öğrencilere, öğretim üyelerine, görevlilere, üniversite dışından siteye giren ziyaretçilere, bilginin ve hizmetin hızlı ve doğru ulaşmasında web sitesinin rolü büyüktür.
Web sitesi, üniversite bünyesinde gerçekleşen etkinliklere, haberlere ve duyurulara basit ve hızlı ulaşılmasını sağlamalıdır. Sadece akademisyenlerine ve öğrencilerine yönelik içerik değil, üniversite ile yeni tanışacak insanlara da doğru yönlendirme ve bilgilendirme sağlayabilmelidir. Site üzerinde ki bilgiler, üniversiteyi tanımak için akla gelebilecek tüm sorulara yanıt verebilmelidir. Üniversitenin eğitimde gösterdiği başarıyı, web sitesi de aynı şekilde gösterebilmelidir.
Web sitesinin tüm bu anlatılan amaçlara hızlı ve etkin hizmet edebilmesinde, grafik tasarım ve kullanılabilirlik en önemli unsurlardır. Web sitesi tasarımında grafik tasarım ögelerinin doğru kullanımı; sitenin akılda kalıcılığını ve kullanıcının görsel anlamda rahatsız olmadan dolaşabilmesini sağlar. Ayrıca grafik tasarım sitenin kullanılabilirliğine de doğrudan etkilidir. Kullanılabilirlik ise, verilmek istenen bilginin mümkün olduğu en kolay ve hızlı şekilde kullanıcıya ulaşmasını sağlayarak, kullanıcının siteyi kullanımını kolaylaştırır.
Web Sitelerinde Grafik Tasarım
İnternet, milyonlarca insanın kullanımındaki dünyanın en yaygın ve en büyük bilgisayarlı iletişim ağıdır. İnternet, içerik ve özellikleriyle özgür bir iletişim ortamıdır. Kullanımı kolaydır, ekonomiktir, yer/alan ve zaman olarak oldukça esnektir. Diger iletişim kanallarına göre hedeflenen kitleye ulaşmada daha başarılıdır. Her istenilen konu istenildigi biçimde sunulabilir, paylaşılabilir. Tüm bu faydalı imkanlar iyi bir planlama ve tasarım ile amacına ulaşabilir.
Yazı, görüntü ve ses gibi verilerin bilgisayar kullanıcılarına ulaşmasını sağlayan bu global ağın cazibesine kapılan pek çok kişi web sayfası yapmakta, farkında olmadan bazı görsel kirlenmelere de neden olmaktadır. Eğer amaç ilgi çekici, bilgi verici ve görsel yönden etkili sayfalar yaratmaksa, belirli bir tasarım birikimine sahip olmak gerekmektedir. Amatör olarak web sayfası yapmak isteyenlerin önünde şüphesiz herhangi bir engel yoktur. Fakat görsel kirlenmeyi en aza indirmek bağlamında bazı ilkeleri ve önerileri dikkate almalarında yarar vardır. (1)
Web Sitesi Tasarımında Kompozisyon
Kompozisyon, yapılacak tasarımın, bütünlüğünün, hiyerarşisinin ve vurgusunun planlandığı kısımdır. Bir web sitesinde doğru kurulmuş kompozisyon; sitenin kolay anlaşılmasını ve devamlılığını sağlar. Gözün, bilgi akışına gore zorlanmadan sayfadaki hareketi takip edebilmesini sağlar. Bir site tasarımında kompozisyon, içerikteki yazılar, görseller, renkler, boşluklar ve ortam ile beraber bir bütün olarak düşünülmelidir.
Düzensiz yerleştirilen yazı ve görüntü ögeleri algılamayı, iletişimi güçleştirir ve yanlış anlaşılmalara neden olur. Yazı ve görüntüler arası görsel denge iyi kurulmalıdır. Renkler, biçimler ve bunların yerleşimi dengeli olmalı, ilgi çekmelidir.(2)
Web Sitesi Tasarımında Negatif-Pozitif Alanlar (Boşluklar)
Tasarımda, yazı, renk, resim, pozitif alan, boşluklar ise negatife alanlar olarak tanımlanır. Boşluklar, tasarımın bütünlüğünü ve akış yönünü belirler. Hiç boşluk bırakılmadan hazırlanmış bir tasarım da izleyici, görsellerin ve yazıların arasında kaybolacaktır. Buda tasarımın oknurluğunu düşürecek ve amacından sapmasını sağlayacaktır. Web sitesi tasarımında, kompozisyon hazırlanırken boş alanlar iyi düşünülmeli ve değerlendirilmelidir. Hiyerarşik yapıda büyük rol oynarlar. İki paragraf arasında fazla bırakılmış boşluk, okuycunun bir sonraki paragrafa geçişini zorlaştırabilir
İnternet kullanıcılarının farklı ekran çözünürlüklerinde ve farklı monitörlerde web sitelerini ziyaret ettikleri bilinmektedir. Bu durumlarda tasarımda boşluklar hesaplanırken göz önünde bulundurulmalıdır. Hazırlanan site farklı monitörlerde ve ekran çözünürlüklerinde denenmelidir. Özellikle düşük ekran çözünürlüklerinde, sitenin rahat okunur olması ve tasarım etrafında yeterli boş alan kalıp kalmadığı kontrol edilmelidir.
Web Sitesi Tasarımında Renk Kullanımı
Renk, neredeyse bir sitenin başarısını tanımlamada içerik ve gezinti kadar önemlidir ve tasarımın etkili bir bileşenidir. Renk, siteye sadece görsel bir çekicilik katmaz, aynı zamanda hedef kitleye gönderdiği mesajdan ötürü de önemlidir. Renge karşı tepkiler, pek çok faktöre bağlıdır. Örneğin, renk körü kullanıcılar için kullanışlılık boyutu önemlidir. Renk sembolizmi, kültürler arasında çarpıcı bir biçimde farklılık gösterebilir.
Ekran tasarımında renklerin kullanılmasında “Renk Bilgisi”nden yararlanılarak hareket edilmelidir. Konu ile ilgili ekranda verilen renk ve grafikler öğrenenin ilgisini uyandıracak nitelikte olmalı ve artalan rengi ile hem vurgulama hem de görülebilirlik açısından uygun bir renk kompozisyonu oluşturmalıdır. Önemli elemanlar üzerine dikkat çekilmek istendiğinde parlak ve ışıklı renkler kullanılmalıdır. Kullanılan yazı ile öğrenenin okuması veya görmesini kolaylaştırıcı artalan rengi, uygun zıtlık oluşturacakrenklerden seçilmelidir (Bülbül, 1999). Ancak, bir ekrandaki renk sayısının dördü geçmemesine özen gösterilmelidir (Yalın, 2000:99)
Web Tasarımında Görsel Kullanımı
Web tasarımın önemli bir parçası ve çoğu zaman olmazsa olmazlarındandır. Görseller, fotoğraf, illüstrasyon, çizim veya animasyon olabilir. Kullanılan görsel ne olursa olsun, kullanımında aşırıya kaçılmamamlıdır. İnternette görsel kullanımı yoğun bir şekilde karşımıza çıkmaktadır. Galeir sayfalarında, haber sayfalarında, eğitim sitelerinde ve benzeri.
Görseller, doğru kullanıldığı yerlerde kullanıcıya yazılardan daha fazla mesaj ve bilgi gönderebilir. Ölçülü ve genel tasarıma uygun kullanılması önemlidir. Yanlış kullanımı kullanıcının sayfadan istediği bilgiyi alamamasına ve memnuniyetsizliğe sebep olabilir. Boyutlarıda dikkatle ayarlanmalıdır. Yanlış ölçülerde ve büyük resimler sayfanın yavaşlamsına hatta sitenin açılamamasına sebep olabilir.
Tasarım hazırlanırken görseller, hem bir pozitif alan olarak hem de renk uyumu açısından, kompozisyon ve hiyerarşi ile beraber düşünülerek kullanılmalıdır.
Web Tasarımda Tipografi Kullanımı
Yazı karakterlerinin iki boyutlu bir yüzeye yerleştirilmesi sanatına - tasarımına “tipografi” denir. Tipografi, yazının mantık sınırlarını zorlamasını sağlar, dikkati diri tutar, insan ruhunu okşar, çileden çıkarır, heyecan verir. Bu nedenle tasarımcının sloganı; "basit, etkin ve derin" olmalıdır. Web sayfaları, kolay kullanımı ve algılanırlığı ile "basit/yalın", verimli ve yararlı bilgileriyle "etkin", tüm sorulara vereceği yanıtlarla ve yaratacağı heyecanla "derin" olmalıdır. (3)
Yazı karakterinin çeşitliliği, gereksinmeye göre olmalıdır. Eğer sayfa büyük, metin uzun ve farklı vurgular gerekiyorsa yazıda çeşitliliğin olması, zenginlik ve renklilik getirir. Çok fazla yazı karakteri daima risktir. Yazıların puntosu çok büyük olursa her bakışta algılanacak sözcük sayısı azalır. Çok küçük olursa da harfler seçilemez. 30-35 cm.lik bir okuma uzaklığı için ortalama yazı boyutu 9-11 puntoya denk gelecek büyüklüktür.
Web Sitelerinde Kullanılabilirlik
Kullanılabilirlik; Uluslararası Standardizasyon Kuruluşu (ISO)’nun tanımına göre etkililik, etkinlik ve memnuniyet kriterleri ile ilişkilendirilmektedir. Etkililik, bir sistemin kullanımıyla belirlenen amaçlara ulaşma derecesidir. Etkinlik, bu amaçlara ulaşmak için harcanması gereken kaynakların bir ölçüsüdür. Memnuniyet ise kullanıcının sistemi kabul edilebilir bulma derecesidir (4).
Nielsen ise, kullanılabilirliği kullanıcının bir ürün veya sistemle olan etkileşimini etkileyen faktörlerin bir kombinasyonu olarak tanımlamıştır (5). Bu faktörlerin tasarım aşamasında dikkate alınmasıyla daha kullanılabilir sistemlerin tasarlanması mümkün olmaktadır. Söz konusu faktörler şunlardır:
• Kolay öğrenilebilirlik
• Etkin kullanılabilirlik
• Hatırlanabilirlik
• Düşük hata oranı
• Kullanım memnuniyeti
Kullanılabilirlikte amaç, ziyaretçilerin beklenti ve ihtiyaçlarına uygun bir şekilde siteyi tasarlamaktır. Üniversite sitelerinden öğrenciler ders programlarını ve notlarını takip edebilmektedir. Böyle bir durumda kullanılabilirliği düşük bir site bu işlevlerini yerine getiremeyeceği için, öğrencinin örneğin öğrenci işlerine gitmesi gerekebilir. Sonuç olarak internet üzerinden çok kısa sürede edinebilcek bir bilgi için fazladan zaman ve imkan harcanmasına yol açılacak.
Grafik Tasarım Açısından Gazi Üniversitesi Web Sitesi
Üniversitenin yeni web sitesi tasarımında önceki tasarıma kıyasla daha sad eve anlaşılır bir yapıya gidildiği görülmektedir. Kullanılan görsel miktarı azaltılmıştır. Hızlı bağlantılar bölümü başlıklar haline getirilerek, daha önce bu bölümde bulunan logo ve görseller anasayfadan kaldırılmıştır. Bu sayede sayfada kullanılabilecek daha fazla boşluk oluşturulmuştur. Anasayfada tüm bölümler başlıklar altından toplanmış ve henüz ilk sayfada oluşabilecek bir yazı kalabalığının önüne geçilmiştir. Akademik ve idari birimler, tanıtım, ulaşım ve iletişim bilgileri, kütüphane, sosyal birimler, haberler ve duyurular ile ilgili birçok sayfaya anasayfadan rahatlıkla ulaşılabilmektedir.
Anasayfada kullanılan tasarım, konsept olarak diğer sayfalarda da kullanılmaktadır. Site bütününde bir devamlılık sağlanmıştır.
Sitede yazı, renk ve görseller yalın bir kompozisyon içerisinde bir araya getirilmiştir. Bu ögeleri grafik tasarım ögeleri olarak ayrı başlıklar altında inceleyeceğiz.
• Kompozisyon
Anasayfada oluşturulan kompozisyonda üniversite logosu ve ismi sayfanın en üstünde sol tarafta beyaz zemin üzerinde kullanılmıştır. Hemen altında üniversitenin sloganı bulunmaktadır. Sayfanın sağ üst köşesinde Atatürk resminin ve Türk Bayrağının birleştiği bir görsel yer almaktadır. Görselin üzerinde tarih ve eğitim-öğretim dönemi bilgisi, site haritası bağlantısı ve İngilizce dil seçeneği kısayolu okunaklı bir şekilde yerleştirilmiştir. Sitenin arama motoruda sayfanın en üstünde sağda bulunmaktadır.
Hiyerarşik yapı yukarıdan aşağı akış yönü takip edecek şekilde düzenlenmiştir. Bütünü bir kare formunu tamalayan tasarım 4 parçaya bölünmüştür.
bölümü üniversite hakkında genel bilgiler, Akademik ve İdari Birimler ve Bilgi Sistemlerinin bağlantılarının olduğu bir menü oluşturmaktadır. Bu menu Flash programı ile hazırlanmış bir açılır menüdür. Fare ile üzerine gelindiğinde rahat bir kullanım sağlamaktadır.
bölümü, Hızlı Bağlantılar Bölümü ve üniversitenin elektronik posta uygulamasının bağlantısı oluşturmaktadır. Hızlı bağlantılarda kısayollar başlıklar kullanılarak yapılmıştır. Rahat okunabilen ve hızlı kullanılabilen bir bölüm olmuştur. Ayrıca hiyerarşik sırada 2. sırada olmasıda hızlı kullanıma katkı sağlamaktadır. Eski site tasarımında hızlı bağlantılar, her birimin kendi logosunun, sayfanın en altında yanyana kullanılması ile oluşturulmuştu. Ve tüm bağlantıların logoları kısıtlı alana sığdırabilmek için küçültüldüğünden, okunması zor hale gelmişlerdi. Oluşan renkkalabalığıda sayfa bütününe olumsuz etki etmekteydi. Yeni tasarımdaki kullanım, sayfa üzerinde daha fazla alan kazanmaya yaramıştır.
bölümü üniversite ve etkinlik fotoğrafları içeren bir animasyon ve hemen altında bulunan Kütüphane, Gazi Haber, AB Programları, Dergiler, Sosyal Birimnler ve Uzaktan Eğitim bağlantıları oluşturmaktadır. Bağlantıların herbiri içeriğine uygun küçük bir görsel ile desteklenmiştir. Animasyonun boyutları, bütün tasarıma oranla, dikeyde 1/2, yatayda 1/3 bir oranda hazırlanmıştır.
bölümde, İletişim-Ulaşım bilgileri, Duyurular bölümü ve Haberler bölümü yer almaktadır. Bu bölümde 3 eşit parçaya bölünmüş ve tasarımda ferahlık oluşturan boşluklar bırakılarak hazırlanmıştır. İletişim bilgileri altında üniversite logosu saydam bir şekilde kullanılarak tasarımda kurumsal bir hareket yapılmıştır. Bölümün alt kısmında yaklaşık 1/3 lük bir kısım boş bırakılmış ve zemin sayfasınırına kadar devam ettirilmiştir. Sağ alt kısımda RSS (Real Simple Syndication – Zengin Site Özeti) bağlantısı ve en altta mavi renkte Gazi Üniversitesi Rektörlüğü – Bilgi İşlem Daire Başkanlığı yazısı yer almaktadır.
Tasarım genelinde kullanılan renk miktarı az tutulmuştur. Kullanılan renkler uyumlu ve canlı bir görünüm sağlamaktadır.
Sitenin diğer sayfalarında da aynı tasarım devam ettirilmiştir. Girilen sayfanın içeriğine bağlı olarak, sağ tarafta sayfa içeriği, sol tarafta sitenin önemli kısımlarının bağlantılarının bulunduğu yönlendirme menüsü kullanılmıştır. Anasayfadan farklı olarak zemin rengi beyaz kullanılmıştır. Sayfayı sağ ve üst taraftan tamalayan bir çerçeve kullanılmıştır.
Sitenin yeni tasarımı genel olarak incelendiğinde titzlikle ve grafik tasarım ilkelerine uygun bir şekilde tasarlandığı görülmektedir.
• Negatif-Pozitif Alanlar (Boşluk)
Site tasarımının kapladığı alan ve etrafında kalan boşluk miktarı farklı monitörlerde ve ekran çözünürlüklerinde denenmiştir. Yapılan denemeler sonucunda tasarımın ölçülerinin düşük çözünürlükte kullanımın göz önüne alınarak hazırlandığı görülmüştür. Aşağıdaki resimlerde sitenin genelde kullanılan bazı çözünürlüklerde görünümü yer almaktadır.
1024x768 px 1280x1024 1600x1200
Anasayfa tasarımı koyu zemin rengi üzerine uygulanmıştır. Bu nedenle bütün olarak kendi içinde yazı ve görseller arasındaki alanlardan boşluk olarak söz edebiliriz. Yazılar ve yazıların kenarlara olan uzaklıkları rahat bir okunurluk sağlamaktadır. Animasyon ve altında yer alan bağlantıları birbirinden ve sayfa bütününden ayıran beyaz boşluklar kullanılmıştır.
Diğer sayfalarda da boşluk kullanımının rahat bir okuma sağladığını görmekteyiz. Farklı içeriklere göre yazılar ve görseller birbirine karışmayacak şekilde yeterli uzaklıklarda yerleştirilmiştir.
• Renk Kullanımı
Sayfa tasarımının üstünde üniversite logosu ve ismi orjinal renginde beyaz zemin üzerinde kullanılmıştır. Site tasarımında ağırlıklı olarak Turkuaz rengi ve tonları kullanılmıştır. Turkuaz rengi tasarıma yumuşak ve dingin bir hava vermiştir. Yazılarında beyaz renkte kullanımı ile bu yumuşak hava tamamlanmıştır. Turkuaz renginin canlandırıcı ve serinletici psikolojik özellikleri bulunmaktadır.
Anasayfada 2. bölümde ve diğer sayfalarda menülerde kullanılan bağlantıların zemin renklerinde pastel tonlar kullanılmıştır. Sitenin anarengi diyebileceğimiz turkuaz ile uyum sağlayacak tonlar seçilmiştir. Kısayol yazılarıda yine beyaz renkte kullanılmıştır.
Sayfa içeriklerine göre değişen uzun yazılarda ve liste yazılarında beyaz zemin üzerinde siyah renk kuallnılmıştır. Okumanın kolaylığı açısından bu tarz kullanımda yazı ile zemin renklerinin birbirine kontrastlık oranın %70 e %30 yada tam tersi olması gerekmektedir. Bu değerin %100 e %0 olduğu zamanlarda gözü rahatsız ettiği bilinmektedir. Ayrıca monitör ışığının parlaklığıda bu etkiyi artırmaktadır.
Photoshop programı ile siteden alınan sayfa örnekleri üzerinde yapılan incelemelerde, yazılarda kullanılan siyah rengin %75 değerinde kullanıldığı görülmüştür. Tasarım hazırlanırken okuma kolaylığının düşünüldüğü anlaşılmaktadır.
Web tasarımda kullanılan renkler, farklı tarayıcı programlarda farklılıklar gösterebilmektedir. Örneğin Internet Explorer ile açtığınız bir sitenin renkleri Firefox, Opera veya Safari gibi tarayıcılarda farklı görünebilir. Sitelerde renk farklılıkları kullanılan monitörden veya MAC yada PC kullanımından da kaynaklanabilir.
Tarayıcıdan kaynaklanan farklılığı gidermek için tarayıcıya göre değişmeyen 216
renkten biri kullanabilir. Tarayıcıdan etkilenmeyen renkleri kolayca tanımlamak için renklerin RGB (kırmızı, yeşil, mavi) değerlerinin her zaman 51’in katlarının olması kuralı kullanılabilir. Başka bir deyişle, eğer tüm üç değer de 51’e bölünebiliyorsa, renk, tarayıcıya göre değişmez. Yalnız, HTML dili, on altılık sayı sistemi (hex) değerlerine ihtiyaç duyar. Bu durumda, bu kurala göre onaltılık sayı sistemi değerleri, sadece 00, 33, 66, 99, CC ve FF içerebilir (Weinman, 2002; Merchant, 2000; Mlawer, 2000). (6)
Aşağıdaki resimlerde Gazi Üniversitesi web sitesinin Internet Explorer, Firefox ve Safari(MAC) tarayıcılarından görüntüleri yer almaktadır. Site farklı tarayıcılarda ziyaret edildiğinde renklerde büyük farklılıkların olmadığı görülmüştür.
İnternet Explorer (PC) Firefox (PC) Safari (MAC)
• Görsel Kullanımı
Sitenin tasarımında az ve öz görsel kullanımı görülmektedir. Tüm sayfalarda en üstte üniversite logosu, Atatürk resmi ve Türk Bayrağı yer almaktadır. Atatürk resmi rahatlıkla tanınacak boyutta kullanılmıştır.
Tasarım içerisinde başlık yazılarına ve bağlantılara vurguyu artırmak için turuncu tonlarında dikkat çekici küçük ok görselleri kullanılmıştır.
Site içerisinde en yoğun görsel kullanımı, animasyonun ve altındaki bağlantıların bulunduğu 3. bölümdür. Animasyon içerisinde 13 fotoğraf kullanılmıştır. Bu fotoğraflarda rektörlük binası, öğrenci manzaraları, kütüphane, derslik görüntüleri ve tiyatro, seminer gibi etkinliklerden görüntüler yer almaktadır. Fotoğrafların hepsi bütün hallerinde kullanılmış ve herhangi bir şekilde deforme edilmemiştir. Fotografik değerler açısından ışık ve kadraj ayarları iyi yapılmış profesyonel fotoğraflardır. Rektörlük binasının eski fotoğrafı hem animasyonun içerisinde hem de site genelinde zeminde saydam olarak kullanılmıştır.
Animasyon bölümünün altında kısayollar ile beraber kullanılan görseller bulunmaktadır. Bu görseller incelendiğinde, beraber kullanıldığı kısayolun içeriğini tek bir kavram ile anlatan etkili ve uygun resimler olduğu görülmektedir.
• Tipografi Kullanımı
Site genelinde kullanılan iki adet font görünmektedir. Uzun yazılar, listeler ve bağlantıların büyük bir kısmında Verdana fontu kullanılmıştır. Anasayfada 1. bölümde ve diğer sayfalarda yönlendirme menüsünde Times New Roman fontu kullanılmıştır.
Kullanılan fontlarda punto miktarı 12 nin üzerinde kullanılmamıştır. Ve görünen en küçük kullanımı 8 puntodur. Sitenin ziyertçi ve hedef kitlesi yetişkin insanlardır. Yetişkin bir insanın ekrana 30-35 cm uzaklıktan rahatlıkla okuyabileceği en düşük yazı boyutları 9-11 punto olarak kabul edilmektedir. Buna göre sitede kullanılan tipografik yapıda espas değerlerininde uygun olması sayesinde okunamama zorluğu görülmemektedir.
Başlık, kısayol ve liste yazılarında bloklama sola dayalı hazırlanmıştır. Uzun yazılarda bloklama sağa ve sola yaslanmıştır.
Uzun yazılarda kullanılan fontun serifsiz olduğu görünmektedir. Aksine serifli fontların takibinin kolay olmasından dolayı uzun yazılarda kullanımı önerilir. Fakat uygun espas değerleri ve font seçimi ile serifsiz fontlarında en az serifli fontlar kadar rahat okunması mümkündür. Bu sitedeki kullanımı bu duruma örnek verebiliriz.
Kullanılabilirlik Açısından Gazi Üniversitesi Web Sitesi
Gazi Üniversitesi web sitesinde ziyaretçilerin bilgiye basit ve hızlı ulaşmaları amaçlanmıştır. Site içerisindeki bilgi organizasyonu ve site mimarisi karşık değildir. Sorunsuz ve doğru çalışan bağlantılar sayesinde istenilen sayfaya rahatlıkla ulaşılabilmektedir. Tüm sayfalarda bulunan yönlendirme menüleri ile sayesinde sitenin kontrolü rahat bir şekilde yapılabilmektedir.
Düzgün ve amacına uygun dil kullanımı sayesinde hem Türk ziyaretçilere hemde yabancı uyruklu ziyeratçilere kullanımda kolaylık sağlamakatdır.
Detaylı arama motorunun mevcut olması ve sorunsuz çalışması, site üzerinden araştırma yapabilme imkanı sunmaktadır.
PHP (Personal Home Page – Kişisel Web Sayfası) programlama dili ile hazırlanmıştır. Bu sayede site üzerinde oluşabilecek yoğun işlem trafiğini veri kaybı olmadan kaldırabilecek yapıdadır. Ayrıca site üzerinde bağımsız çalışan birde antivirüs programı hizmete girmiştir. Bu program sayesinde hem ziyaretçilerin güvenliği hem de site üzerindeki bilgilerin güvenliği sağlanmış olmaktadır.
Sitede yayınlanan haberler RSS (Real Simple Syndication – Zengin Site Özeti) kanalı hizmetine aktarılmaktadır. RSS sayesinde ziyaretçiler siteye girmeden de bilgisayarlarının masaüstüne kurabilecekleri programcıklar sayesinde üniversitenin haberlerini ve duyurularını canlı takip edebilmektedirler. RSS uyumlu cep telefonlarından ve televizyonlardan da takip etmek mümkündür.
Gazi Üniversitesi yeni sitesinin derinliği 2 birimdir. Web sitelerinde derinlik, anasayfadan itibaren her tıklama ile açılan yeni sayfa sayısıyla belirlenir. Üniversite sitesinde bulunan tüm bağlantılar 1 sayfa derine inmektedir ve sonrasında ana siteden ayrılıp ilgili birimin sitesine geçiş yapmaktadır. Derinliğin az olduğu portal mantıklı sitelerde dolaşım ve işlevsellik başarılı bir şekilde sağlanabilmektedir.
Son olarak Gazi üniversitesi yeni site tasarımı, üniversitenin tüm birimlerini ziyaretçilere sorunsuz bir şekilde sunabilen hızlı ve basit yapıda bir portal haline gelmiştir.
Sonuç ve Öneriler
• Web sitesi tasarımında görsel ögeler arasında devamlılık ilişkiis kurulmalıdır.
• Web sitesi tasarımında grafik tasarım ögeleri dengeli kullanılmalı ve bütünlük içerisinde hiyerarşik yapı oluşturulmalıdır.
• Web sitesi tasarımında tipografi kullanımında okunurluluğa özellikle dikkat edilmelidir.
• Web sitelerinde bağlantılar ve yönlendirmeler basit ve anlaşılır olmalıdır.
• Web siteleri hazırlanırken farklı bilgisayarlar, tarayıcı programlar ve ekran çözünürlüklerinde denemeler yapılmalıdır.
• Üniversite gibi eğitim kurumlarının site tasarımları özellikle tasarım ilkelerini destekler yapıda olmalıdır ve örnek teşkil etmelidir.
Kaynakça
(1)(2)(3) - PEKTAŞ, Hasip – “İnternette Görsel Kirlenme” isimli makalesi, TÜBİTAK Bilim ve Teknik Dergisi, Ankara, Mart 2001 Sayı: 400, Sayfa: 72-75
BÜLBÜL, H. İ. (1999). Öğretim amaçlı bilgisayar yazılımlarında ekran tasarımı. Milli
Eğitim. 144, 74-79.
YALIN, H.İ. (2000). Öğretim teknolojileri ve materyal geliştirme. Ankara. Nobel Yayın
Dağıtım.
(4)(5) Elif KILIÇ, Zülal GÜNGÖR “Web Site Tasarımlarımlarında Kullanılabilirlik Değerlendirme Yöntemlerinin Önemi” isimli makale, Gazi Üniversitesi Endüstri Mühendisliği Bölümü
(6) Serçin KARATAŞ “Öğretim Amaçlı Web Sayfası Tasarımında Renk Kullanımı” isimli makale, G.Ü. Gazi Eğitim Fakültesi Dergisi Cilt 23, Sayı 2 (2003) 139-148
Özcan Özgür DURSUN “Eğitsel Web Sitelerinin Görsel Tasarım Kriterlerine ve Kullanıcılara Sunulan Hizmetlere Göre Değerlendirilmesi” Yayınlanmış Yüksek Lisans Tezi, Bilgisayar ve Teknolojileri Eğitim Anabilim Dalı, Eskişehir Eğitim Bilimleri Enstitüsü, Anadolu Üniversitesi, Eskişehir, Ocak 2004
Bu çalışmada, Gazi Üniversitesi’nin 2009 yılı Kasım ayında tasarımı değişen ve hizmete giren yeni websitesi, grafik tasarım ilkeleri ve kullanılabilirlik açısından incelenmiştir. Üniversitenin 50.000 den fazla öğrencisinin ziyaret edeceği web sitesinin, kullanıcıların beklenti ve ihtiyaçlarını uygun şekilde karşıladığını belirlemede, tasarım niteliklerinin ve kullanılabilirlik faktörlerinin incelenmesi önemlidir. Makalenin amacı bu incelemeyi gerçekleştirmektir.
Giriş
Gazi Üniversitesi bugün itibariyle bünyesinde, eğitim ve öğretimini sürdüren 15 fakülte, 5 yükse okul, 9 meslek yüksek okulu, 26 araştırma merkezi ve 6 enstitü bulundurmaktadır. Bu birimlere ek olarak, kulüpler, öğrenci kulüpleri, basılı ve süreli yayınları, radyosu ve sürekli etkinlikleri bulunmaktadır.
Tüm bu akademik birimlere, kulüplere ve etkinliklere devam eden ve katılan 50.000 den fazla öğrencisi vardır. Öğrencilere, öğretim üyelerine, görevlilere, üniversite dışından siteye giren ziyaretçilere, bilginin ve hizmetin hızlı ve doğru ulaşmasında web sitesinin rolü büyüktür.
Web sitesi, üniversite bünyesinde gerçekleşen etkinliklere, haberlere ve duyurulara basit ve hızlı ulaşılmasını sağlamalıdır. Sadece akademisyenlerine ve öğrencilerine yönelik içerik değil, üniversite ile yeni tanışacak insanlara da doğru yönlendirme ve bilgilendirme sağlayabilmelidir. Site üzerinde ki bilgiler, üniversiteyi tanımak için akla gelebilecek tüm sorulara yanıt verebilmelidir. Üniversitenin eğitimde gösterdiği başarıyı, web sitesi de aynı şekilde gösterebilmelidir.
Web sitesinin tüm bu anlatılan amaçlara hızlı ve etkin hizmet edebilmesinde, grafik tasarım ve kullanılabilirlik en önemli unsurlardır. Web sitesi tasarımında grafik tasarım ögelerinin doğru kullanımı; sitenin akılda kalıcılığını ve kullanıcının görsel anlamda rahatsız olmadan dolaşabilmesini sağlar. Ayrıca grafik tasarım sitenin kullanılabilirliğine de doğrudan etkilidir. Kullanılabilirlik ise, verilmek istenen bilginin mümkün olduğu en kolay ve hızlı şekilde kullanıcıya ulaşmasını sağlayarak, kullanıcının siteyi kullanımını kolaylaştırır.
Web Sitelerinde Grafik Tasarım
İnternet, milyonlarca insanın kullanımındaki dünyanın en yaygın ve en büyük bilgisayarlı iletişim ağıdır. İnternet, içerik ve özellikleriyle özgür bir iletişim ortamıdır. Kullanımı kolaydır, ekonomiktir, yer/alan ve zaman olarak oldukça esnektir. Diger iletişim kanallarına göre hedeflenen kitleye ulaşmada daha başarılıdır. Her istenilen konu istenildigi biçimde sunulabilir, paylaşılabilir. Tüm bu faydalı imkanlar iyi bir planlama ve tasarım ile amacına ulaşabilir.
Yazı, görüntü ve ses gibi verilerin bilgisayar kullanıcılarına ulaşmasını sağlayan bu global ağın cazibesine kapılan pek çok kişi web sayfası yapmakta, farkında olmadan bazı görsel kirlenmelere de neden olmaktadır. Eğer amaç ilgi çekici, bilgi verici ve görsel yönden etkili sayfalar yaratmaksa, belirli bir tasarım birikimine sahip olmak gerekmektedir. Amatör olarak web sayfası yapmak isteyenlerin önünde şüphesiz herhangi bir engel yoktur. Fakat görsel kirlenmeyi en aza indirmek bağlamında bazı ilkeleri ve önerileri dikkate almalarında yarar vardır. (1)
Web Sitesi Tasarımında Kompozisyon
Kompozisyon, yapılacak tasarımın, bütünlüğünün, hiyerarşisinin ve vurgusunun planlandığı kısımdır. Bir web sitesinde doğru kurulmuş kompozisyon; sitenin kolay anlaşılmasını ve devamlılığını sağlar. Gözün, bilgi akışına gore zorlanmadan sayfadaki hareketi takip edebilmesini sağlar. Bir site tasarımında kompozisyon, içerikteki yazılar, görseller, renkler, boşluklar ve ortam ile beraber bir bütün olarak düşünülmelidir.
Düzensiz yerleştirilen yazı ve görüntü ögeleri algılamayı, iletişimi güçleştirir ve yanlış anlaşılmalara neden olur. Yazı ve görüntüler arası görsel denge iyi kurulmalıdır. Renkler, biçimler ve bunların yerleşimi dengeli olmalı, ilgi çekmelidir.(2)
Web Sitesi Tasarımında Negatif-Pozitif Alanlar (Boşluklar)
Tasarımda, yazı, renk, resim, pozitif alan, boşluklar ise negatife alanlar olarak tanımlanır. Boşluklar, tasarımın bütünlüğünü ve akış yönünü belirler. Hiç boşluk bırakılmadan hazırlanmış bir tasarım da izleyici, görsellerin ve yazıların arasında kaybolacaktır. Buda tasarımın oknurluğunu düşürecek ve amacından sapmasını sağlayacaktır. Web sitesi tasarımında, kompozisyon hazırlanırken boş alanlar iyi düşünülmeli ve değerlendirilmelidir. Hiyerarşik yapıda büyük rol oynarlar. İki paragraf arasında fazla bırakılmış boşluk, okuycunun bir sonraki paragrafa geçişini zorlaştırabilir
İnternet kullanıcılarının farklı ekran çözünürlüklerinde ve farklı monitörlerde web sitelerini ziyaret ettikleri bilinmektedir. Bu durumlarda tasarımda boşluklar hesaplanırken göz önünde bulundurulmalıdır. Hazırlanan site farklı monitörlerde ve ekran çözünürlüklerinde denenmelidir. Özellikle düşük ekran çözünürlüklerinde, sitenin rahat okunur olması ve tasarım etrafında yeterli boş alan kalıp kalmadığı kontrol edilmelidir.
Web Sitesi Tasarımında Renk Kullanımı
Renk, neredeyse bir sitenin başarısını tanımlamada içerik ve gezinti kadar önemlidir ve tasarımın etkili bir bileşenidir. Renk, siteye sadece görsel bir çekicilik katmaz, aynı zamanda hedef kitleye gönderdiği mesajdan ötürü de önemlidir. Renge karşı tepkiler, pek çok faktöre bağlıdır. Örneğin, renk körü kullanıcılar için kullanışlılık boyutu önemlidir. Renk sembolizmi, kültürler arasında çarpıcı bir biçimde farklılık gösterebilir.
Ekran tasarımında renklerin kullanılmasında “Renk Bilgisi”nden yararlanılarak hareket edilmelidir. Konu ile ilgili ekranda verilen renk ve grafikler öğrenenin ilgisini uyandıracak nitelikte olmalı ve artalan rengi ile hem vurgulama hem de görülebilirlik açısından uygun bir renk kompozisyonu oluşturmalıdır. Önemli elemanlar üzerine dikkat çekilmek istendiğinde parlak ve ışıklı renkler kullanılmalıdır. Kullanılan yazı ile öğrenenin okuması veya görmesini kolaylaştırıcı artalan rengi, uygun zıtlık oluşturacakrenklerden seçilmelidir (Bülbül, 1999). Ancak, bir ekrandaki renk sayısının dördü geçmemesine özen gösterilmelidir (Yalın, 2000:99)
Web Tasarımında Görsel Kullanımı
Web tasarımın önemli bir parçası ve çoğu zaman olmazsa olmazlarındandır. Görseller, fotoğraf, illüstrasyon, çizim veya animasyon olabilir. Kullanılan görsel ne olursa olsun, kullanımında aşırıya kaçılmamamlıdır. İnternette görsel kullanımı yoğun bir şekilde karşımıza çıkmaktadır. Galeir sayfalarında, haber sayfalarında, eğitim sitelerinde ve benzeri.
Görseller, doğru kullanıldığı yerlerde kullanıcıya yazılardan daha fazla mesaj ve bilgi gönderebilir. Ölçülü ve genel tasarıma uygun kullanılması önemlidir. Yanlış kullanımı kullanıcının sayfadan istediği bilgiyi alamamasına ve memnuniyetsizliğe sebep olabilir. Boyutlarıda dikkatle ayarlanmalıdır. Yanlış ölçülerde ve büyük resimler sayfanın yavaşlamsına hatta sitenin açılamamasına sebep olabilir.
Tasarım hazırlanırken görseller, hem bir pozitif alan olarak hem de renk uyumu açısından, kompozisyon ve hiyerarşi ile beraber düşünülerek kullanılmalıdır.
Web Tasarımda Tipografi Kullanımı
Yazı karakterlerinin iki boyutlu bir yüzeye yerleştirilmesi sanatına - tasarımına “tipografi” denir. Tipografi, yazının mantık sınırlarını zorlamasını sağlar, dikkati diri tutar, insan ruhunu okşar, çileden çıkarır, heyecan verir. Bu nedenle tasarımcının sloganı; "basit, etkin ve derin" olmalıdır. Web sayfaları, kolay kullanımı ve algılanırlığı ile "basit/yalın", verimli ve yararlı bilgileriyle "etkin", tüm sorulara vereceği yanıtlarla ve yaratacağı heyecanla "derin" olmalıdır. (3)
Yazı karakterinin çeşitliliği, gereksinmeye göre olmalıdır. Eğer sayfa büyük, metin uzun ve farklı vurgular gerekiyorsa yazıda çeşitliliğin olması, zenginlik ve renklilik getirir. Çok fazla yazı karakteri daima risktir. Yazıların puntosu çok büyük olursa her bakışta algılanacak sözcük sayısı azalır. Çok küçük olursa da harfler seçilemez. 30-35 cm.lik bir okuma uzaklığı için ortalama yazı boyutu 9-11 puntoya denk gelecek büyüklüktür.
Web Sitelerinde Kullanılabilirlik
Kullanılabilirlik; Uluslararası Standardizasyon Kuruluşu (ISO)’nun tanımına göre etkililik, etkinlik ve memnuniyet kriterleri ile ilişkilendirilmektedir. Etkililik, bir sistemin kullanımıyla belirlenen amaçlara ulaşma derecesidir. Etkinlik, bu amaçlara ulaşmak için harcanması gereken kaynakların bir ölçüsüdür. Memnuniyet ise kullanıcının sistemi kabul edilebilir bulma derecesidir (4).
Nielsen ise, kullanılabilirliği kullanıcının bir ürün veya sistemle olan etkileşimini etkileyen faktörlerin bir kombinasyonu olarak tanımlamıştır (5). Bu faktörlerin tasarım aşamasında dikkate alınmasıyla daha kullanılabilir sistemlerin tasarlanması mümkün olmaktadır. Söz konusu faktörler şunlardır:
• Kolay öğrenilebilirlik
• Etkin kullanılabilirlik
• Hatırlanabilirlik
• Düşük hata oranı
• Kullanım memnuniyeti
Kullanılabilirlikte amaç, ziyaretçilerin beklenti ve ihtiyaçlarına uygun bir şekilde siteyi tasarlamaktır. Üniversite sitelerinden öğrenciler ders programlarını ve notlarını takip edebilmektedir. Böyle bir durumda kullanılabilirliği düşük bir site bu işlevlerini yerine getiremeyeceği için, öğrencinin örneğin öğrenci işlerine gitmesi gerekebilir. Sonuç olarak internet üzerinden çok kısa sürede edinebilcek bir bilgi için fazladan zaman ve imkan harcanmasına yol açılacak.
Grafik Tasarım Açısından Gazi Üniversitesi Web Sitesi
Üniversitenin yeni web sitesi tasarımında önceki tasarıma kıyasla daha sad eve anlaşılır bir yapıya gidildiği görülmektedir. Kullanılan görsel miktarı azaltılmıştır. Hızlı bağlantılar bölümü başlıklar haline getirilerek, daha önce bu bölümde bulunan logo ve görseller anasayfadan kaldırılmıştır. Bu sayede sayfada kullanılabilecek daha fazla boşluk oluşturulmuştur. Anasayfada tüm bölümler başlıklar altından toplanmış ve henüz ilk sayfada oluşabilecek bir yazı kalabalığının önüne geçilmiştir. Akademik ve idari birimler, tanıtım, ulaşım ve iletişim bilgileri, kütüphane, sosyal birimler, haberler ve duyurular ile ilgili birçok sayfaya anasayfadan rahatlıkla ulaşılabilmektedir.
Anasayfada kullanılan tasarım, konsept olarak diğer sayfalarda da kullanılmaktadır. Site bütününde bir devamlılık sağlanmıştır.
Sitede yazı, renk ve görseller yalın bir kompozisyon içerisinde bir araya getirilmiştir. Bu ögeleri grafik tasarım ögeleri olarak ayrı başlıklar altında inceleyeceğiz.
• Kompozisyon
Anasayfada oluşturulan kompozisyonda üniversite logosu ve ismi sayfanın en üstünde sol tarafta beyaz zemin üzerinde kullanılmıştır. Hemen altında üniversitenin sloganı bulunmaktadır. Sayfanın sağ üst köşesinde Atatürk resminin ve Türk Bayrağının birleştiği bir görsel yer almaktadır. Görselin üzerinde tarih ve eğitim-öğretim dönemi bilgisi, site haritası bağlantısı ve İngilizce dil seçeneği kısayolu okunaklı bir şekilde yerleştirilmiştir. Sitenin arama motoruda sayfanın en üstünde sağda bulunmaktadır.
Hiyerarşik yapı yukarıdan aşağı akış yönü takip edecek şekilde düzenlenmiştir. Bütünü bir kare formunu tamalayan tasarım 4 parçaya bölünmüştür.
bölümü üniversite hakkında genel bilgiler, Akademik ve İdari Birimler ve Bilgi Sistemlerinin bağlantılarının olduğu bir menü oluşturmaktadır. Bu menu Flash programı ile hazırlanmış bir açılır menüdür. Fare ile üzerine gelindiğinde rahat bir kullanım sağlamaktadır.
bölümü, Hızlı Bağlantılar Bölümü ve üniversitenin elektronik posta uygulamasının bağlantısı oluşturmaktadır. Hızlı bağlantılarda kısayollar başlıklar kullanılarak yapılmıştır. Rahat okunabilen ve hızlı kullanılabilen bir bölüm olmuştur. Ayrıca hiyerarşik sırada 2. sırada olmasıda hızlı kullanıma katkı sağlamaktadır. Eski site tasarımında hızlı bağlantılar, her birimin kendi logosunun, sayfanın en altında yanyana kullanılması ile oluşturulmuştu. Ve tüm bağlantıların logoları kısıtlı alana sığdırabilmek için küçültüldüğünden, okunması zor hale gelmişlerdi. Oluşan renkkalabalığıda sayfa bütününe olumsuz etki etmekteydi. Yeni tasarımdaki kullanım, sayfa üzerinde daha fazla alan kazanmaya yaramıştır.
bölümü üniversite ve etkinlik fotoğrafları içeren bir animasyon ve hemen altında bulunan Kütüphane, Gazi Haber, AB Programları, Dergiler, Sosyal Birimnler ve Uzaktan Eğitim bağlantıları oluşturmaktadır. Bağlantıların herbiri içeriğine uygun küçük bir görsel ile desteklenmiştir. Animasyonun boyutları, bütün tasarıma oranla, dikeyde 1/2, yatayda 1/3 bir oranda hazırlanmıştır.
bölümde, İletişim-Ulaşım bilgileri, Duyurular bölümü ve Haberler bölümü yer almaktadır. Bu bölümde 3 eşit parçaya bölünmüş ve tasarımda ferahlık oluşturan boşluklar bırakılarak hazırlanmıştır. İletişim bilgileri altında üniversite logosu saydam bir şekilde kullanılarak tasarımda kurumsal bir hareket yapılmıştır. Bölümün alt kısmında yaklaşık 1/3 lük bir kısım boş bırakılmış ve zemin sayfasınırına kadar devam ettirilmiştir. Sağ alt kısımda RSS (Real Simple Syndication – Zengin Site Özeti) bağlantısı ve en altta mavi renkte Gazi Üniversitesi Rektörlüğü – Bilgi İşlem Daire Başkanlığı yazısı yer almaktadır.
Tasarım genelinde kullanılan renk miktarı az tutulmuştur. Kullanılan renkler uyumlu ve canlı bir görünüm sağlamaktadır.
Sitenin diğer sayfalarında da aynı tasarım devam ettirilmiştir. Girilen sayfanın içeriğine bağlı olarak, sağ tarafta sayfa içeriği, sol tarafta sitenin önemli kısımlarının bağlantılarının bulunduğu yönlendirme menüsü kullanılmıştır. Anasayfadan farklı olarak zemin rengi beyaz kullanılmıştır. Sayfayı sağ ve üst taraftan tamalayan bir çerçeve kullanılmıştır.
Sitenin yeni tasarımı genel olarak incelendiğinde titzlikle ve grafik tasarım ilkelerine uygun bir şekilde tasarlandığı görülmektedir.
• Negatif-Pozitif Alanlar (Boşluk)
Site tasarımının kapladığı alan ve etrafında kalan boşluk miktarı farklı monitörlerde ve ekran çözünürlüklerinde denenmiştir. Yapılan denemeler sonucunda tasarımın ölçülerinin düşük çözünürlükte kullanımın göz önüne alınarak hazırlandığı görülmüştür. Aşağıdaki resimlerde sitenin genelde kullanılan bazı çözünürlüklerde görünümü yer almaktadır.
1024x768 px 1280x1024 1600x1200
Anasayfa tasarımı koyu zemin rengi üzerine uygulanmıştır. Bu nedenle bütün olarak kendi içinde yazı ve görseller arasındaki alanlardan boşluk olarak söz edebiliriz. Yazılar ve yazıların kenarlara olan uzaklıkları rahat bir okunurluk sağlamaktadır. Animasyon ve altında yer alan bağlantıları birbirinden ve sayfa bütününden ayıran beyaz boşluklar kullanılmıştır.
Diğer sayfalarda da boşluk kullanımının rahat bir okuma sağladığını görmekteyiz. Farklı içeriklere göre yazılar ve görseller birbirine karışmayacak şekilde yeterli uzaklıklarda yerleştirilmiştir.
• Renk Kullanımı
Sayfa tasarımının üstünde üniversite logosu ve ismi orjinal renginde beyaz zemin üzerinde kullanılmıştır. Site tasarımında ağırlıklı olarak Turkuaz rengi ve tonları kullanılmıştır. Turkuaz rengi tasarıma yumuşak ve dingin bir hava vermiştir. Yazılarında beyaz renkte kullanımı ile bu yumuşak hava tamamlanmıştır. Turkuaz renginin canlandırıcı ve serinletici psikolojik özellikleri bulunmaktadır.
Anasayfada 2. bölümde ve diğer sayfalarda menülerde kullanılan bağlantıların zemin renklerinde pastel tonlar kullanılmıştır. Sitenin anarengi diyebileceğimiz turkuaz ile uyum sağlayacak tonlar seçilmiştir. Kısayol yazılarıda yine beyaz renkte kullanılmıştır.
Sayfa içeriklerine göre değişen uzun yazılarda ve liste yazılarında beyaz zemin üzerinde siyah renk kuallnılmıştır. Okumanın kolaylığı açısından bu tarz kullanımda yazı ile zemin renklerinin birbirine kontrastlık oranın %70 e %30 yada tam tersi olması gerekmektedir. Bu değerin %100 e %0 olduğu zamanlarda gözü rahatsız ettiği bilinmektedir. Ayrıca monitör ışığının parlaklığıda bu etkiyi artırmaktadır.
Photoshop programı ile siteden alınan sayfa örnekleri üzerinde yapılan incelemelerde, yazılarda kullanılan siyah rengin %75 değerinde kullanıldığı görülmüştür. Tasarım hazırlanırken okuma kolaylığının düşünüldüğü anlaşılmaktadır.
Web tasarımda kullanılan renkler, farklı tarayıcı programlarda farklılıklar gösterebilmektedir. Örneğin Internet Explorer ile açtığınız bir sitenin renkleri Firefox, Opera veya Safari gibi tarayıcılarda farklı görünebilir. Sitelerde renk farklılıkları kullanılan monitörden veya MAC yada PC kullanımından da kaynaklanabilir.
Tarayıcıdan kaynaklanan farklılığı gidermek için tarayıcıya göre değişmeyen 216
renkten biri kullanabilir. Tarayıcıdan etkilenmeyen renkleri kolayca tanımlamak için renklerin RGB (kırmızı, yeşil, mavi) değerlerinin her zaman 51’in katlarının olması kuralı kullanılabilir. Başka bir deyişle, eğer tüm üç değer de 51’e bölünebiliyorsa, renk, tarayıcıya göre değişmez. Yalnız, HTML dili, on altılık sayı sistemi (hex) değerlerine ihtiyaç duyar. Bu durumda, bu kurala göre onaltılık sayı sistemi değerleri, sadece 00, 33, 66, 99, CC ve FF içerebilir (Weinman, 2002; Merchant, 2000; Mlawer, 2000). (6)
Aşağıdaki resimlerde Gazi Üniversitesi web sitesinin Internet Explorer, Firefox ve Safari(MAC) tarayıcılarından görüntüleri yer almaktadır. Site farklı tarayıcılarda ziyaret edildiğinde renklerde büyük farklılıkların olmadığı görülmüştür.
İnternet Explorer (PC) Firefox (PC) Safari (MAC)
• Görsel Kullanımı
Sitenin tasarımında az ve öz görsel kullanımı görülmektedir. Tüm sayfalarda en üstte üniversite logosu, Atatürk resmi ve Türk Bayrağı yer almaktadır. Atatürk resmi rahatlıkla tanınacak boyutta kullanılmıştır.
Tasarım içerisinde başlık yazılarına ve bağlantılara vurguyu artırmak için turuncu tonlarında dikkat çekici küçük ok görselleri kullanılmıştır.
Site içerisinde en yoğun görsel kullanımı, animasyonun ve altındaki bağlantıların bulunduğu 3. bölümdür. Animasyon içerisinde 13 fotoğraf kullanılmıştır. Bu fotoğraflarda rektörlük binası, öğrenci manzaraları, kütüphane, derslik görüntüleri ve tiyatro, seminer gibi etkinliklerden görüntüler yer almaktadır. Fotoğrafların hepsi bütün hallerinde kullanılmış ve herhangi bir şekilde deforme edilmemiştir. Fotografik değerler açısından ışık ve kadraj ayarları iyi yapılmış profesyonel fotoğraflardır. Rektörlük binasının eski fotoğrafı hem animasyonun içerisinde hem de site genelinde zeminde saydam olarak kullanılmıştır.
Animasyon bölümünün altında kısayollar ile beraber kullanılan görseller bulunmaktadır. Bu görseller incelendiğinde, beraber kullanıldığı kısayolun içeriğini tek bir kavram ile anlatan etkili ve uygun resimler olduğu görülmektedir.
• Tipografi Kullanımı
Site genelinde kullanılan iki adet font görünmektedir. Uzun yazılar, listeler ve bağlantıların büyük bir kısmında Verdana fontu kullanılmıştır. Anasayfada 1. bölümde ve diğer sayfalarda yönlendirme menüsünde Times New Roman fontu kullanılmıştır.
Kullanılan fontlarda punto miktarı 12 nin üzerinde kullanılmamıştır. Ve görünen en küçük kullanımı 8 puntodur. Sitenin ziyertçi ve hedef kitlesi yetişkin insanlardır. Yetişkin bir insanın ekrana 30-35 cm uzaklıktan rahatlıkla okuyabileceği en düşük yazı boyutları 9-11 punto olarak kabul edilmektedir. Buna göre sitede kullanılan tipografik yapıda espas değerlerininde uygun olması sayesinde okunamama zorluğu görülmemektedir.
Başlık, kısayol ve liste yazılarında bloklama sola dayalı hazırlanmıştır. Uzun yazılarda bloklama sağa ve sola yaslanmıştır.
Uzun yazılarda kullanılan fontun serifsiz olduğu görünmektedir. Aksine serifli fontların takibinin kolay olmasından dolayı uzun yazılarda kullanımı önerilir. Fakat uygun espas değerleri ve font seçimi ile serifsiz fontlarında en az serifli fontlar kadar rahat okunması mümkündür. Bu sitedeki kullanımı bu duruma örnek verebiliriz.
Kullanılabilirlik Açısından Gazi Üniversitesi Web Sitesi
Gazi Üniversitesi web sitesinde ziyaretçilerin bilgiye basit ve hızlı ulaşmaları amaçlanmıştır. Site içerisindeki bilgi organizasyonu ve site mimarisi karşık değildir. Sorunsuz ve doğru çalışan bağlantılar sayesinde istenilen sayfaya rahatlıkla ulaşılabilmektedir. Tüm sayfalarda bulunan yönlendirme menüleri ile sayesinde sitenin kontrolü rahat bir şekilde yapılabilmektedir.
Düzgün ve amacına uygun dil kullanımı sayesinde hem Türk ziyaretçilere hemde yabancı uyruklu ziyeratçilere kullanımda kolaylık sağlamakatdır.
Detaylı arama motorunun mevcut olması ve sorunsuz çalışması, site üzerinden araştırma yapabilme imkanı sunmaktadır.
PHP (Personal Home Page – Kişisel Web Sayfası) programlama dili ile hazırlanmıştır. Bu sayede site üzerinde oluşabilecek yoğun işlem trafiğini veri kaybı olmadan kaldırabilecek yapıdadır. Ayrıca site üzerinde bağımsız çalışan birde antivirüs programı hizmete girmiştir. Bu program sayesinde hem ziyaretçilerin güvenliği hem de site üzerindeki bilgilerin güvenliği sağlanmış olmaktadır.
Sitede yayınlanan haberler RSS (Real Simple Syndication – Zengin Site Özeti) kanalı hizmetine aktarılmaktadır. RSS sayesinde ziyaretçiler siteye girmeden de bilgisayarlarının masaüstüne kurabilecekleri programcıklar sayesinde üniversitenin haberlerini ve duyurularını canlı takip edebilmektedirler. RSS uyumlu cep telefonlarından ve televizyonlardan da takip etmek mümkündür.
Gazi Üniversitesi yeni sitesinin derinliği 2 birimdir. Web sitelerinde derinlik, anasayfadan itibaren her tıklama ile açılan yeni sayfa sayısıyla belirlenir. Üniversite sitesinde bulunan tüm bağlantılar 1 sayfa derine inmektedir ve sonrasında ana siteden ayrılıp ilgili birimin sitesine geçiş yapmaktadır. Derinliğin az olduğu portal mantıklı sitelerde dolaşım ve işlevsellik başarılı bir şekilde sağlanabilmektedir.
Son olarak Gazi üniversitesi yeni site tasarımı, üniversitenin tüm birimlerini ziyaretçilere sorunsuz bir şekilde sunabilen hızlı ve basit yapıda bir portal haline gelmiştir.
Sonuç ve Öneriler
• Web sitesi tasarımında görsel ögeler arasında devamlılık ilişkiis kurulmalıdır.
• Web sitesi tasarımında grafik tasarım ögeleri dengeli kullanılmalı ve bütünlük içerisinde hiyerarşik yapı oluşturulmalıdır.
• Web sitesi tasarımında tipografi kullanımında okunurluluğa özellikle dikkat edilmelidir.
• Web sitelerinde bağlantılar ve yönlendirmeler basit ve anlaşılır olmalıdır.
• Web siteleri hazırlanırken farklı bilgisayarlar, tarayıcı programlar ve ekran çözünürlüklerinde denemeler yapılmalıdır.
• Üniversite gibi eğitim kurumlarının site tasarımları özellikle tasarım ilkelerini destekler yapıda olmalıdır ve örnek teşkil etmelidir.
Kaynakça
(1)(2)(3) - PEKTAŞ, Hasip – “İnternette Görsel Kirlenme” isimli makalesi, TÜBİTAK Bilim ve Teknik Dergisi, Ankara, Mart 2001 Sayı: 400, Sayfa: 72-75
BÜLBÜL, H. İ. (1999). Öğretim amaçlı bilgisayar yazılımlarında ekran tasarımı. Milli
Eğitim. 144, 74-79.
YALIN, H.İ. (2000). Öğretim teknolojileri ve materyal geliştirme. Ankara. Nobel Yayın
Dağıtım.
(4)(5) Elif KILIÇ, Zülal GÜNGÖR “Web Site Tasarımlarımlarında Kullanılabilirlik Değerlendirme Yöntemlerinin Önemi” isimli makale, Gazi Üniversitesi Endüstri Mühendisliği Bölümü
(6) Serçin KARATAŞ “Öğretim Amaçlı Web Sayfası Tasarımında Renk Kullanımı” isimli makale, G.Ü. Gazi Eğitim Fakültesi Dergisi Cilt 23, Sayı 2 (2003) 139-148
Özcan Özgür DURSUN “Eğitsel Web Sitelerinin Görsel Tasarım Kriterlerine ve Kullanıcılara Sunulan Hizmetlere Göre Değerlendirilmesi” Yayınlanmış Yüksek Lisans Tezi, Bilgisayar ve Teknolojileri Eğitim Anabilim Dalı, Eskişehir Eğitim Bilimleri Enstitüsü, Anadolu Üniversitesi, Eskişehir, Ocak 2004
Oğuzhan KORKUT, Gazi Üniversitesi, Eğitim Bilimleri Enstitüsü, Grafik Eğitimi Programı,
Yüksek Lisans Öğrencisi
Yüksek Lisans Öğrencisi
Ders Sorumlusu: Prof. Ahmet ATAN
isst.jpg)
benn.jpg)
