Ashley Sack

1. Ashley Sack Personal Portfolio Explanations

2. Professional Purpose ofPortfolio • The main goal of this portfolio website is to attract employers to and inform employers of my abilities, goals, and experiences when it comes to a teaching career. In addition to an interview, this usable portfolio would be offered to employers in order to expand on my professional and educational experiences as well as my teaching abilities and qualifications. Therefore, making this portfolio user-friendly for employers was a large focus of this project. Additionally, I aimed to make it sustainable so that I could add, change, and delete content and pages in order to alter in for different audiences and purposes. Lastly, I aimed to make the whole website accessible to multiple users and audiences.

3. Design Features and Rationale • Many of the design features have a specific purpose toward the ultimate goal of the portfolio. Most of the design is not just placed within the project by chance, but is backed by reason. The next few slides will outline these specific design features and why they look and function the way that they do compared to the original mockups. Enjoy!

8. Top Navigation Bar • My top navigation bar only includes the home and resume buttons because during the trouble shooting process, I attempted to put a button in the top navigation for each page of the portfolio and it was too much. The navigation bar was long, overwhelming, and difficult to maintain. I thought that it was harder to look at that much text in a navigation bar and to understand where within the site one was, because it seemed overwhelming. Therefore, the top navigation bar only includes the home page and a downloadable version of my resume, which is the main document that most employers are going to want to see throughout this entire website anyways. This resume is the major work that this entire website is built around. The website just highlights parts of the resume and expands upon them. Therefore, this seemed to be most important to include at the top of each page in an easily visible manner. Inplacing the home page and the resume at the top of my website pages, users are able to always get back to where they started and to always view the one document in which they are going to find all of the information they would be looking for. In the mean time, they have accessibility to the site to experience expansions of the resume. Additionally, my mockup shows that the contact button was in the navigation, but because that page only contained two items, I decided to place that content on my homepage where it most logically makes sense to be found.

9. Right- Side Navigation Bar Originally in my mockups, I had a right side navigation bar with all of my portfolio pages listed within it. As I was working on the site, I toyed with the idea that these pages be placed within the top navigation bar but soon threw that idea in the trash. It made much more sense as far as organization to put all portfolio pages in their own specific place,which would be the same on each page. From any page in the site, one has access to any other page and they look in the same place on each page to find where to go next. These navigation bar buttons are strategically labeled to specify what types of information the user will find on those particular pages. When the user clicks on the black and bold navigation bar buttons, the text turns grey, which lets the user know they are clicking on a link and will be able to use it to direct them to a new page on the site. Originally, I had several more buttons on my mockups that would make up pages within the site, but for usability purposes, I condensed many of the pages together if they held similar information. Many of the original buttons on the side navigation bar seemed similar and repetitive, which could have caused a lot of confusion for the user because it would have been hard to predict where to go next or get back to where they once were based on the button labels. Therefore, the buttons are strategically named and change color when clicked on in order to allow the user to be confident in how they are using the site.

10. Headings & Subheadings • Headings are all colored with light blue, all start from the left, and are all strategically titled in order to help the reader clearly see that new information is being presented and exactly what that information will be about. Every time the topic of information changes, a blue heading will appear that clearly labels the information below. • Subheadings are located just under the headings and are colored grey to distinguish them from the headings. They are also bold, distinguishing them from the grey text below. These subheadings offer insight as to what the paragraphs below are going to offer. • This pattern is located on every page within the portfolio in order to provide a uniform design that will comfort users because they will know how the pages are set up.

11. Uniform Design • The entire point of each page looking the same with the same organization and the same layouts, colors, and outline is for the users. When my employers are navigating my site, I don’t want them focused on difficulties they may have with finding or viewing the information. I want it as clear and concise as possible so that they may focus on the information itself, not finding the information. Therefore, the design is simple and uniform in order to provide easy access to the information. If every page looked different, they user would have to re-learn and re-navigate for each page. That is not my goal or the purpose for this site. The purpose was to use my new website design skills to portray myself as clearly and in-depth as possible to my future employers.

12. Photos& Captions • On several of the pages are photos that expand upon the text information presented above them. Additionally, in smaller grey text are captions for these photos explaining exactly what they show. Much of what I have done as a teacher has been documented with pictures and evaluations from instructors. So, for future employers to see that I have gained tangible experience and classroom time is necessary for them to believe that I am qualified. That is why the pictures are located consistently under the the text information above them. This is a sequential display of the information. Captions are also always placed below the picture to further explain what the picture shows. The goal was to present these portfolio pages in the form of a story. They flow one part into another and at the end of the page, one clearly understands the information that the page shows. The important information is presented first with the least important information last.

13. Links vs. Text • Links to documents and presentations displaying my work are all strategically placed under the text paragraph that explains them. They are bulleted in lime green in order to make them extremely visible and desirable to explore. As a user places their arrow on them, they become dark green and underlined, which helps users know they are pointing to a link that they can explore. • Normal text is in a lighter gray font to distinguish text from links. This helps readers choose between what they can read and what they can explore further.

14. Explanatory Phrase at Top • At the top of each page in my portfolio is the statement “This profile is a "sneak-peak" into who I am as a student, educator, and citizen in society today. Take a Look!” The entire point of this statement is summarize the contents of this portfolio in one statement. It helps users get a feel for what they will be seeing within the portfolio and what the entire purpose is for this website of information about me. It helps direct their mind and thoughts toward a certain outlook, which will help them as they explore the contents. Otherwise, they may not know what they are looking at or what type of portfolio this is. That could make the information seem scattered and ambiguous.

15. Explanatory Paragraphs • On each page of the portfolio are paragraphs under headings and sub-headings that explain a new part about myself as a professional. These paragraphs are meant to set the context and mood of the page. They are meant to inform and explain a new part of my experience and qualifications. Below these explanatory paragraphs are specific examples in the form of pictures or links that further display what is described in the paragraph. As a teacher, I have great insight into how most teacher’s think, plan, and view information. Therefore, setting up the information in these paragraphs is a great way to provide comfort and familiarity to the user.

16. Mock-ups Vs. Product • I truly believe that my final product is the best portfolio that I could have made. Although it seems as though it includes less information and less media than originally planned, I believe that it is the most clear, concise, useful, and sustainable website that I could have created. Eventually, I would love to add videos of myself teaching lessons and I would love to add a photos page that displays much more of myself as a professional in a classroom. Realistically, I don’t have the media available that I originally thought I would at this point in the semester ( I was supposed to be videotaped for a class and it never happened). For now, the changes and additions that I have made to this site are to the satisfaction of myself and to the satisfaction of users that will be the main audience of this site.

17. Usability, Sustainability, Accessibility • As outlined in all of the slides before, this site was built for its audience. Each design decision was made in order to make the website and its contents easily and simply usableand accessibility. Additionally, the way my site is organized and set up, makes it sustainable. I can easily add pages, delete irrelevant information, and make changes to the content on pages. Having one CSS across the entire site makes it also very sustainable and easy to make changes and maintain over time.