WHAT WEEK IS IT? Work in Progress, Maybe Week 4?

Remember that time the whole week was a blur and I made week 4 and week 5 in the same post because week 5 was a total of like 1 day based on how I do my posts – yeah.

<h1>Bootstrap – <small> Making Everyones Shit Look Like Apple </small></h1>

What am I doing? I had a semi-break down and now I feel better and after remaking my webpage a total of 5 times, I now have something that looks NOTHING like my mock ups!

I think my mock ups display my talent to aim way to high – which is nice. And my current site displays my talent to … do things?

tumblr_mif0oeRvs41rj9mdto1_500

So, I guess I should like, show what I’ve done?

Homepage – yo

homepage

 

Communities page – yo

communities

 

Major page – yo

 

 

artanddesign

 

Apply page – work in progress, yo.

 

apply

tumblr_mslhs7Sskh1sh9b0ro6_500

 

I might actually finish this assignment … which is nice.
For the time being – I’m just trying to get a layout that I can, and fill it in later.

10:13pm, Next Day or Something?

So – I’m running very low on steam and this assignment is actually effecting my health I’m stressing so much about it, which is nice.
Either way, this is what I have so far – I have work all weekend too which is nice .. means I can’t really work on it too much over the weekend. But yeah

Homepage – no change other than sticky menu.

So now, when you scroll past the second menu it sticks to the top of the page. Woo.

homepage

 

Starting Out

Apply

 

Art and Design

 

artanddesign

 

Communities

Communities

 

Contact

 

contact

 

Apply

 

Apply

 

 

Now I’ve got a nice framework. The idea of adding styles to this actually threatens my very existence. I’m so tired and so so sick. Staying positive – other than the poor circulation, numb back and butt, aching wrists and lack of actually being able to see anything further than 1meter from me… I’m doing good! I also have no appetite, I’m extremely light-sensitive, I can only see the colours pink, green, yellow and white, when I close my eyes I see code like it’s somehow imprinted on my eyelids … and I now tend to hiss when people approach me… Don’t all Digital Media majors?

I also just stared at my screen for 15min trying to figure out if ‘apply’ was actually a word and if so, how to spell it.


25899-I-Need-Sleep

 

Tuesday:

animatedCya nerds, I’m out.
I still hate how my website looks, sadface.

homepage

 

 

apply

 

Wednesday, 1:11pm

Fin.

Just formatting my html but it’s all over now.
So tired. So sleep.
done.

Advertisements

Work in Progress Week 3, I hate it.

So, this week I decided I hate my website. Which is nice.
It’s too contrasted.. I need to bring it down a notch, I’m just not really sure how. I thought about going with the contrasted look but I just don’t really like it. I want to make it less because less is more.

Also, I think an issue with the website is that you should be able to use it like arion, where you can log in and view your results and such.

Today I thought about redesigning arion and not AUTs website but I think I’ve come a little too far for that. I just need to get this website looking better so I don’t hate is as much as I do…. because I really do..

What needs to change:

Search bar: hate, hate hate hate. So ugly! I need to intergrate it more with the page. I wanted to make it a main feature but I would really rather not. I think I need to put it in its rightful place – at the top right of the page.

Menus: Meh, not bad … a bit to stark.. I need a font that isn’t capitalised … but still san serif – to be honest I think I need to change my whole approach. I’ve got menus stacked in a way that makes the ones at the top of the page seem the most used.. Maybe I need to work with size and opacity to emphasise menus but have them closer together?

Hows the rework going? Well!

I’ve basically just ended up changing things around and moving sections to create better flow and overlapping. I’ve also looked a lot more at university websites and what they actually put on their homepage. I think the content I had on mine may have not been the ‘first impression’ content a website homepage needs. So – I started again.

This is what I have so far: (Obviously it’s a work in progress!)

Wednesday, 12:06pm

NEW_02

It’s looking better I feel, but it still needs a lot of work which I’m planning to do today. So, lets get to it.

1:06pm

Slowly getting somewhere …

NEW_02_1

 

 2:06pm

NEW_02_2

 3:50pm

NEW_02_3

funny-gif-steve-carell-freaking-outNEW_02_4

sheldon

4:48pm

NEW_Contact_WF01

cropped-tumblr_inline_momhaibxpi1rxdhk51I’ve listened to the same podcast like 4 times today.
Kill me.

Okay, cat vine and then I’m out.

Work in Progress Week 2, Can you feel it now, Mr Krabs?

10533890_10152778911535329_4174832826778210442_n

Moving on from my wireframes, I thought I work start to fill in the wireframe from the homepage before I started working on the other 5 wireframes.

I’m considering getting most of my images from here: https://www.facebook.com/autuniversity/photos_stream and asking for permission from the Facebook coordinator and seeing what I get. I can always just get some placeholder images off of Flickr if I can’t get permission to use them.

Homepage Wireframe

wireframe_04

 

wireframe_02_2

 

The header is going to work like a gallery, where the image will rotate and the user can read more about the image. This will replace the average gallery AUT currently has on their website that looks … not great.

Now, to pick some topics and pictures to display here:

  1. Diversity Week

Diversity Week 06

2. Rainbow Youth

Diversity Week 05

3. 3D Lab @ AUT

3D Lab 02

4. Textile Design

Textile Design Lab AUT

5. Cook Island Language Week

Cook Island Language Week Celebrations at South Camput

6. AUT South Campus Maori Week Celebrations

Maori Language Week South Campus

 

Social Media Icons: http://wegraphics.net/downloads/free-long-shadow-social-media-icons/

7:50pm  / 3 Coffees In

wireframe_05.1

01Can you feel it, Mr Krabs?

10:30pm  / 5.5 Coffees In

wireframe_05.2

lyndapls01

 

lyndapls02

lyndapls03I’m getting real tired of your shit, web media.

9:34pm, Wednesday

I feel like I need to give a shout out to the amount of cafine I’ve consumed. You’ll definitely be the first thing I thank in my graduation speech.

I’ve started adding colour to my layout. I’m really not sure what colour to go with, at the moment I’m sticking with blue because thats what AUT is about … but I mean, there are so many colours I could use! Like yellow, or purple .. but not green or red. I mean, AU is blue … I probably should move away from blue.

ColourP01

 

These are the colours I am currently working with, but here are a few I’ve thought about trying. I think the plan is to make the whole website and then decide on a colour.

ColourP02ColourP03ColourP04But not green .. 😛

ColourP05Let me know what ya’ll think 😉

wireframe_09

03 Are you feeling it now, Mr Krabs?

wireframe_9.1HEADER

02Art thou feeling it now, Mr Krabs?

But really, what the heck do I do with this damn search section?

Screen Shot 2014-10-01 at 10.59.49 pm

Like, please help. I hate it. Thank you. Also I haven’t done the footer yet, don’t judge me. It’s ugly too. That is all.

Thursday, 11:51pm

So I slept through my alarm for ADV so I figured I’d work on web.

 

wireframe_9.3

I can’t actually believe how long this has taken me.. My god I need to sort my speed of Photoshopping out.. I think I just make everything a lot more difficult than it needs to be .. and I take too many breaks [lets be honest] … now that I’ve got like a basic idea down I guess I can see how the rest of the pages should look.. I mean the homepage was probably going to be the hardest .. So now I can get stuck into the other pages.

Now what page do I want to do next?

Guides

StudyGuides

Ohh man this one is going to be hard! Basically I don’t think I’, allowed to use the images of the prospectus guides so I need to think of a way to show these without actually showing them..

GuidesWireframe01

It’s … okay? I guess … Maybe I’ll feel better about it once I make a few changes.

GuidesWireframe02

Mmm, it’s okay … just okay. I’m not overly happy with it but I feel it’s acceptable. I might move away and come back to it.. Yeah

 

 

Work in Progress Week 1, May the Odds Be Ever in Your Favor.

Introduction to Bootstrap

http://builtwithbootstrap.com/

235c38c23a9a4c38109ed2b073365b84

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.

CurrentLayoutAUT

In my initial proposal, I wanted the website to look something like this:

Wireframe_01Which 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.

anigif_enhanced-buzz-12202-1355761224-14

 

Sitemap

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:

sitemapIt’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.

 

Other websites

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.

coven-recap_612x380

 

if you get the reference, you’re a god.

Moving on…

Menu and Footer Ideas

 

Header Ideas

Screen Shot 2014-09-26 at 9.31.05 pm

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.

Icons

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.

Main Menu

  • Prospective Students (Study at AUT)
  • Postgraduate Study
  • International Students
  • Current (Returning) Students
  • Staff
  • Prospective Staff
  • Apply for 2015

Secondary Menu

  • Home
  • Study
  • Courses
  • Departments
  • Students
  • Research
  • Teaching
  • Contact

Links Menu:

  • Arion
  • AUT Online
  • Unicentral

Quick Links Menu:

  • Study Areas
  • Library
  • Campuses
  • Community
  • Staff Directory
  • Careers at AUT

Footer Menu:

  • About AUT
  • Contact Us 
    • Hours
    • Freephone
    • Text
    • Email
    • Staff Directory

Social Networking Menu (icons):

  • Contact us
  • Facebook
  • Twitter
  • Youtube
  • Instagram (pending)
  • Tumblr (pending)
  • Pinterest (pending)

Search Bars

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)

Course Search

  • 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
    • Masters
    • Doctorates
    • Certificates
    • Diplomas
    • Graduate Certificates
    • Graduate Diplomas
    • Postgraduate Certificates
    • Post Graduate Diplomas
  • Must select year
    • 2015
    • 2014

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
    • Undergraduate

Imagery

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.

Videos

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.

Guides

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.

Hover State

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
  • Majors
  • Description
  • Apply now button on hover state
  • Share this
  • Enquiry button (email)
  • Download PDF
  • Snail Mail me a prospectus

Consistency

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?

funny-gif-steve-carell-freaking-out

Oh my god, this is getting a bit intense.. I think I should maybe start seeing how all this looks

Wireframe 01

wireframe_02_1

 

Wireframe 02

wireframe_03

 

Wireframe 03

wireframe_04

 

PERFECTION

 

This post is huge, so I’m going to move onto the next week and begin with filling out this wireframe.

🙂

Work in Progress, Two Week Holidays

I’m starting this section of the post before I have done any research, basically as an opening thought from reading the brief.

The brief sets the scenario as: we’ve been approached by a prominent organisation in New Zealand to design and build a high-profile promotional website that highlights the most important information about the organisation. The website needs to be professionally designed and easy to use and should be branded distinctively to stand out from any existing site. They wish for the design to be responsive to work on multiple devices and varying sizes.

So, basically:

  1. The organisation needs to have an existing website that is out-of-date, or just perhaps insufficient.
  2. The design needs to be high-profile
  3. It is a promotional website
  4. The website must highlight the most important information about the organisation.
  5. It needs to be functional and promote ease of use.
  6. The website should be branded distinctively (from competition)
  7. The website must be responsive and must be able to work on multiple devices.

What needs to be submitted:

  1. A proposal – titled ‘Sources’ and categorised ‘brief 2, submission’
  2. A sitemap / finalised wireframe – titled ‘Sitemap’ and categorised ‘brief 2, submission’
  3. Multiple mockups – titled ‘Mockups’ and categorised ‘brief 2, submission’
  4. A working website
  5. Blog –
    1. Research consisting of 5 posts
    2. Weekly WIP reports
    3. 2 comments on peoples work

Proposal Breakdown

So, I need to write a 600+ word proposal that answers questions about the goal, audience, approach and content of the site. The proposal should comprehensivley describe the project and act as a summary around which you will create your design. Questions such as:

  1. Who is the client / organisation
  2. What is the project promoting?
  3. What will users want from this site and how will you provide this?
  4. What is the content of the site?
  5. How will you brand and theme the site and what is your intended communication for this?

As well as a list of all sources (if any) usable, titled ‘Sources’.

So, from here I need to pick a website/organisation, and outline what my research parameters will be. What I began with was a list of websites I use regularly that I find myself frustrated with. I then branched out to websites I hear other people use and find frustrating and outlined why.

Brainstorm

I’m just showing a section because the rest of it was pretty sparse. I twiddled it down to the website I probably dislike the most for look and usability, the website for Auckland University of Technology. Here >> http://www.aut.ac.nz/

Like, it’s okay! But, it could and should be so much cooler!

Let me explain..

Scoping_website

So basically, if I was to re-design this website I need to:

– redesign the navigational menu / social media bar / and navigational bar to other pages (AUT online, Arion and Uni Central)
– Redesign the quick links panel
– Redesign the scrolling gallery
– Redesign the models and probably their layout
– Create more emphasis on the news model, this seems like an important part of the layout
– Fix the layout ratio for the ‘video’ section, or remove it entirely
– Make a more predominant ‘contact us’ bar.
– Make the search bar more of a main function of the page, I would assume if you were going to this website you would be looking for specific information about AUT so the search bar needs to be a lot more prominent in the entirety of the website.
– Rearrange the layout of the footer, perhaps move some of the content and maybe not have a social networking bar here .. seems a bit pointless to have two, but one at the bottom would probably be a good idea.

 

Research Parameters

I think a lot more information could be displayed on this webpage, so justifying everything centrally is a good idea, but I want the aspects of the website to be a lot bigger. This however may make it hard for devices, so it is something I would have to address in my research – how small is too small on a device such as an iPad or an iPhone (going with what most students use). Another thing I need to think about is what my research parameters will be.

Things I need to research:

– Device use – what sort of devices students (target audience) use, to incorporate into my testing strategy.
– General layout and readability research (inclusive of how the gallery will function)
– Functionality research (How students use the website, and what they use it most for (assumably))
– Colour scheme research (unique and forward thinking)
– Branding research (look at how AUT brands themselves and see if this needs to be addressed)
– Font research (for both main body of text and headings / navigational menus)
– Menu research (look at what the navigational menus need to entail, what students are looking for on the main page, as well as what social networks need to be linked to the page [Youtube, Twitter, Facebook, official pages only)
– Look at the functionality of the ‘contact us’ page and decide if I am going to make a sort of submissions tab where students can forward their enquires to.

Pages

What pages I am going to create and what they will show (6 pages)

1. Homepage (http://www.aut.ac.nz/)
2. Study at AUT (http://www.aut.ac.nz/study-at-aut)
3. Being a Student (http://www.aut.ac.nz/being-a-student)
4. About AUT (http://www.aut.ac.nz/about-aut)
5. AUT study guides (http://www.aut.ac.nz/study-at-aut/2015-study-guides)
6. Contact us (http://www.aut.ac.nz/about-aut/Phone-numbers,-contacts-and-campuses)

Okay, so there is a lot to work on here obviously, To make sure I don’t bite off more than I can chew I’ve decided to look for a minute at how the rebrand is actually going to look, and getting some basic wireframes, logos and palettes down for the proposal.

Logo

aut_logo

The current AUT logo is pretty standard. The cool thing about it is it can be used like this anywhere though, I mean you could print this and have this on exams, it’s pretty versatile to the point where you don’t have to worry about what it looks like on paper, on a shirt as an emblem, on a prospectus .. whatever you like. This aside, it is quite plain. I’m digging the sectioning off of each line, but I’m really not digging the fonts, what the heck? Are these 3 different fonts? or is the bottom one the top one but filled in.. Yuck. It’s very um, American Highschool-esque. What we really need here is a thick, robust san-serif font. I also think that this logo is calling for a background, a shape or something.

Logo_01Logo_02So, now that I’ve changed the font, adjusted the sizing and put the logo in a circle I feel like we’re getting somewhere. I also added a background (the same background from HTFML). It is creative commons but I don’t think I’ll keep it .. It’s just getting a feel for what this logo can really become. The logo is missing some real embellishment. I had a look at a few different logos for universities. It seems sort of irrelevant at first because AUT wants to move away from the traditional ideas of university branding. Realistically, I think the best call would be to smash these two ideas together. Here are my reference images for how I reworked the logo:

teesside-university-logo

 

378c4873d133a8d4ca812dea64d3e62e

 

And here is what I created based on these two (and other) reference images:

LogosWordpress

 

 

 

I’ll close this post here and start doing weekly WIP reports now 🙂
xox
Gossip Code