Corsair Connect Revised

Corsair Connect Mobile Site

 

Thoughts/ Decision Making Process:

I added the Santa Monica College logo to reflect the branding of the school. I decided to choose a theme that had a lot of blue in it to match with the logo and the current smc website. If I were to choose a color that changes when you click on the link/button, I would choose the gold color that is also currently used on the Santa Monica College website.  The current Corsair Connect Mobile site has a lot of text written on the header of the page and I decided to take all of that out because I felt as if it wasn’t necessary being there. I noticed that a lot of the links on the mobile site are repetitive, so I tried not to duplicate that in the comps that I created.  The one link that I did repeat on the two pages was the button that says “Pay Fees.”  I kept it on both pages because I feel as if the students would often visit the mobile corsair connect to pay their fees if they can’t make it to a computer in time. That is why I felt that it could be necessary to have this link on the mobile site twice.

As for the other links, I kept what I thought was important and I condensed what I felt that could be condensed. For example : on the enrollment site, Add or drop a class could be on the same page with the option to choose which you wanted to do. Another link I condensed was the Student Services. If you were to go on that link, you would be able to view your class schedule/ unofficial grades and transcript.

 

Another thing, is if you would scroll down, you would also have the “Nav” Repeated so you could access the homepage from the bottom of the mobile site too.

Midterm Project

Thoughts and Decision Process

I haven’t worked with css/html since web 2, and that was months ago. It took me a while to get used to dreamweaver again after using it for a couple assignments before the midterm.  I know the more you work with dreamweaver, the better you will become at it. I tried my best with the project and I would have to say the hardest part that I had with it, was the navigation. The coding got a little confusing after putting in the search bar. Turns out that the navigation didn’t end up being in the header section anymore. That was the main part of this assignment that threw me off. If there’s one small error in the code, it can make the whole layout look shifted once you view it on a browser.

I decided to make my color palette based around shades of green. I have a photo on the home page that has a lot of green in it, but that’s not exactly why I chose green. I think with a white background, different shades of green look great against it. I feel like the banner really stands out and the black and green text aren’t hard to view. Even if there are other colors shown on the webpage, the green doesn’t throw them off.

I chose a drop-down menu because there is a lot of content that goes on a college website. Not every single nav link needed to have  a sub nav, but a lot of them did.

Overall, I liked this project and I learned a lot along the way. I know we will be working more with designing the entire design technology website as the semester progresses.

Midterm Comps

This slideshow requires JavaScript.

Wireframes

Week 6

1. What are wireframes?
A website wireframe, also known as a page schematic or screen blueprint, is a visual guide that represents the skeletal framework of a website. The wireframe depicts the page layout  or arrangement of the website’s content, including interface elements and navigational systems, and how they work together.  The wireframe usually lacks typographic style, color, or graphics, since the main focus lies in functionality, behavior, and priority of content. In other words, it focuses on “what a screen does, not what it looks like.
2. When do you not need to define key user paths?
If the site does not require the user to actually do anything task oriented (When there is a fill out form, log in, purchase, etc), there is no need to define user paths

Week 5

1. What is a “site map?”
It is a representation of the site’s structure, organization , flow, and grouping of content and information. It communicates, it defines and it structures. It is a representation of the entire project, from a broad vantage point to many of the most minute of details.The sitemap should clearly show all HTML pages within each section of the site. Every page will get a box and most major links will be represented. The site-mapping step is where the front-end and back-end team must work together.  The reason to even bother with a sitemap is to develop a conceptual model, providing a mental picture of the site as a whole.
2. What are the two types of naming conventions that are addressed in the book?
The two types of naming conventions that should be addressed are: organizational/numeric naming and HTML naming. Sitemaps should contain them both.  If they only contain one, be sure to include a key that makes it easy to discern the other naming convention. Organizational naming is simply applying a numeric or alphanumeric standard to pages and sections of the sitemap. With HTML naming, some is abbreviated and condensed, some use upper and lowercase to help organize and define, and others ignore all standards and abbreviate some and write out others.