Download to read offline
Presentation of filamentality
- 1. FilamentalityScreen Design ProjectHeidiMechamEDT 503
- 2.
- 3.
- 4.
- 5. Start New PageRedesign
- 6.
- 7.
- 8.
- 9.
- 10.
Editor's Notes
- #2 Hello. My name is Heidi Mecham and I have chosen to redesign the website Filamentality. I have been required to use Filmentality for a few of my classes and although I understand its usefulness, the current formatting dissuades me from implementing it as part of my curriculum. Lets take a look at the current formatting and some changes I have made in my redesign.
- #3 Filamentality is a website designed for people of all ages, interests and talents. It can be especially useful to educators and their students. It was created to help users build their own web page even if they lack traditional HTML training. All that is needed is a basic internet connection and computer skills. Filamentality guides users through a series of steps in order to create their own web page. The web page is designed to be a gathering place for links and information on a specific topic. Users can create pages for personal use or to share with friends. Here we have the home page of Filamentality. The feel is rather informal. The blues, pinks and playful lettering send a very casual message to the viewer. There is a lot of white space at the top and the user needs to scroll down in order to see the full message. The search and log in functions are located in the middle of the screen along with some other links. If you scroll down on the main page you will find a long list of FAQs.
- #4 In the redesign I wanted to keep the playful feel but upgrade the professionalism. The shades of blue give a more professional feel while the complimentary orange and Filamentality font help keep the playfulness. I chose to place my search bar and Log In link in the top right hand of the screen. This is a traditional location for these functions and will increase the ease of navigation. I moved the links from the middle the page to the left hand side and created a FAQs link at the bottom. I eliminated the abundance of wasted white space from the top of the screen by placing the sponsor icons to the top right of the page. This way they are visible but don’t limit the functionality of the page.
- #5 Here we have the starting page to create a new Filamentality list. Once again there is a lot of white space at the top. The colors and fonts make it difficult to read the instructions. The main information for the page must be reached by scrolling down.
- #6 In the redesign I kept the formatting from the Home Page. I feel the repetition is important in making the page more Navigable.However, I made the title banner smaller in order to make more room for the content of the page. I placed an arrow by the “Start a New Page” button to mark where the user is located. I increased the font size and moved the steps to creating a new page to the center of the screen. The proximity of the title, steps and instructions to each other and the center of the screen makes the page more user friendly. I included a scroll bar within the Numbered Steps so that users will be able to see what kind of information will be required of them before they start entering information.
- #7 This page describes the different formats available for your web page. The beginning paragraph describes the different formats and the bulleted list repeats the information in bullet form. The tree that you can see towards the bottom is a flow chart to guide the user through their intended use of the web page in order to help them choose the most beneficial format. Once again there is a lot of scrolling, an abundance of information which can be overwhelming and difficult to read because of the blue font.
- #8 I redesigned the Activity formats page into two different pages. The keeps the formatting from the former pages. It includes the arrow indicating where the user is located. The information presented is a combination of the paragraph, bullet list and links from the previous page. The proximity of the link to the description make the ease of navigation greater and lessens the split attention effect. The second page includes the tree created to guide the users choice of web design. I thought the visual break down was helpful and goal oriented.
- #9 The last page I redesigned was the FAQs page. It is originally located at the bottom of the Home Page. It is in small blue lettering and scattered with links.
- #10 The redesign of the FAQs page gives a list of all the questions at the beginning which are links to the answers below. The list up top gives users the ability to quickly see all the questions that are answered on this page so they do not have to scroll down and find every question. The questions are all links and will take you down below to a the repeated question and answer. The user then has a choice to either go back and forth from question to answer or to scroll through all of the questions at their leisure.
- #11 The main problems I found in using Filamentality were its presentation and navigation. The changes I made addressed both issues. The Contrast found the in the complementary color scheme and playful filamentality lettering created balance between the professionalism and playfulness of the site. The repetition of formatting made the site more navigable and added substance to the credibility of the site. The original web pages have a variety of alignment types. I chose to align my content to the left to increase the readability and lessen the distraction of where my eyes were supposed to be. The greatest issue of proximity was making room for the main content of the page so that I could see it as soon as the page loaded. By increasing the ease of navigation and lessening the distracting content I made Filamentality more user friendly and approachable as an educator and a student.