Introduction to Bootstrap
So, Matt made it perfectly clear that we need to work with Bootstrap, and not against it. Therefor, I should have a good’ol research of bootstrap before I even think about looking at my wireframes again as I may have to rework my wireframes to accommodate for bootstrap, (I’m not saying I’ll dumb my site down for the sake of bootstrap and ease, I’m just saying if I want stuff to look consistent, I should probably accommodate for it).
Mock ups / Wireframes
So I was nervous about boilerplate and bootstrap, so I decided to do a research post on them. I’m now feeling confident enough to do my wireframe mocks.
In my initial proposal, I wanted the website to look something like this:
Which was cautiously close to the website original. Since researching, I’ve decided I want to move a little further away from the original AUT website layout. Time to bang out some wireframes, I’m ready.
So far, this is how my sitemap looks. I’m sure it will change but this is how I plan to navigate around my site. This was really helpful to make as it was something I didn’t think about in Assignment 2 of WMP I, and I found towards the end of the assignment, I could have had a lot better planning in my navigational bars as they didn’t really match. Anyway, here it is:
It’s really basic, I didn’t really know what to write. I searched what a sitemap is on Wikipedia as I found the brief didn’t explain it and I wanted to get ahead and do the little planning stuff like this before Matt went over it in class which I’m sure he will, and once he does, I can easily make changes based on what he says.
I’m pretty much going to Frankenstein this website and take all the best pieces of university websites and smash them into my current webpage.
if you get the reference, you’re a god.
Menu and Footer Ideas
One thing that needs to be taken into account is why users have clicked on this particular site, and what they expect to find/what they’re looking for.
Primary Homepage Menu:
Obviously the real reason anyone come to the homepage is for basic information, a search function and to navigate away from the current page. The homepage should have a face value aspect, where all the basic, almost mandatory information is displayed, but the main focus should be on navigation and searching, functions to move away from the current page.
On the homepage I plan to have multiple search bars and multiple navigation menus. The only issue here is that I need a way to make them all work together without looking cluttered, and in your face. Basically, I want mass navigation without the look of mass navigation. This could be hard to achieve.
The way I think I will do this is to work with icons; this will limit my navigation menus to a list of icons or something similar. I’m mostly unsure how this will work but I’m sure issues will come to light in my mockups. All I know for sure is that I will use icons for my social networking menu.
- Prospective Students (Study at AUT)
- Postgraduate Study
- International Students
- Current (Returning) Students
- Prospective Staff
- Apply for 2015
- AUT Online
Quick Links Menu:
- Study Areas
- Staff Directory
- Careers at AUT
- About AUT
- Contact Us
- Staff Directory
Social Networking Menu (icons):
- Contact us
- Instagram (pending)
- Tumblr (pending)
- Pinterest (pending)
There will be one main search bar at the top of the page, probably near the social networking icons. This will serve the purpose of a main search function. Towards the footer there will be 2 or 3 more search bars which will be more specified to particular searches such as ‘search qualification’ or ‘search scholarship’. I think this is something that AUT’s current page is lacking and definitely needs to be addressed.
Search Website (top of page)
- Students must select which campus
- Placeholder text (e.g. Communications)
- Must have a ‘View All’ Button
- Must select qualification level
- Bachelor Degrees
- Conjoint Bachelor Degrees
- Bachelor Degree with Honours
- Graduate Certificates
- Graduate Diplomas
- Postgraduate Certificates
- Post Graduate Diplomas
- Must select year
Scholarship and Award Search
- Must have a view all button
- placeholder text ‘e.g Psychology’
- User must select campus
- must select level of study
- Post graduate
I think the way I’ll get around this whole ordeal is if I make the bars look good and different from one another. My plan is to place menus over images with opacity in blocks, maybe even close to the logo. I want to take the ‘quick links’ section AUT has and overlay to create a better looking vertical menu. I think changing the orientation of the menus may almost trick the user into not seeing how many bars there are and getting slightly confused. As long as I group everything in a way that make sense, it shouldn’t be too confusing.
The age old question remains: do people really hate auto-plays? I was considering the answer to be yes.. realistically. I think however, it could be quite cool to find a ‘reasons to study at AUT’ video and place it on the main page as a featured video, and perhaps have a hover state so that when you hover it plays automatically. If I was going to do this, I would want to put a few videos up.
I find I’m thinking a lot about the home page, and not so much about the other pages – like I expect them to just happen and follow suit. A page I really need to start thinking about is the guides’ page. I’m not sure what kind of information I should display here. I know I probably need either a picture (or icon) of the prospectus and the name, but what else?
Search and Share function
Maybe users would like a paper search function? Maybe even a ‘type in an interest’ and a search function could tag guides and they could come up depending on what students have typed in! This would be cool! I’m not sure how to do something like this but I’m sure I could learn. I think something I need to take into account is that people really aren’t too sure what they want to study. Perhaps a share function would be cool, like a ‘pin this’ for Pinterest or something so that people can discuss their personal study paths.
I was thinking perhaps something could happen with the description on hover? So, maybe if the user hovered their mouse over the prospectus, the box could grow (jQuery) and display a larger description, or perhaps even the career paths or majors. This has really got me thinking about what sort of information needs to be addressed here and that maybe the prospectus could actually be torn apart and just displayed as information on the website. However this is probably a bit much.
Information to display (in no particular order)
- Career paths
- Apply now button on hover state
- Share this
- Enquiry button (email)
- Download PDF
- Snail Mail me a prospectus
Things that need to stay consistent through the whole website are the size of the header, (this may differ from the homepage to the other pages) and the size and content of the footer. So, what needs to be in the footer?
Oh my god, this is getting a bit intense.. I think I should maybe start seeing how all this looks
This post is huge, so I’m going to move onto the next week and begin with filling out this wireframe.