Research Post 1: Content Research

A lot of the thinking of this is looked at in WIP Week 1 (located here: https://shaunidrought.wordpress.com/2014/09/25/work-in-progress-week-1-may-the-odds-be-ever-in-your-favor/ ) If anything is missing, or unexplained check there.

A not only obvious, but good place to start when re-designing a website is to sit back and ask: What content needs to be displayed here?
A few vital questions surge, what content isn’t here that needs to be? If I had a real client I would ask this, but (un)fortunately I don’t. So, the questions remain at:
What content/information needs to be displayed within the parameters of the page?
What content is most important? / What content has the viewer come here to see?
What content (if any) doesn’t need to be here?
and is anything of importance missing?

Okay, so lets see what sort of information we are presented with. When you Google AUT you get this:

Screen Shot 2014-09-12 at 11.52.59 am

We could assume this is all important information. Obviously here you get caught in the trap of redisplaying all of this information that the user already has on the actual website, or trying to justify the lesser importance paid to information such as the phone number as users already have this information from initially Googling. I think for the sake of being an assignment I will ignore that Google gives you this information and assume that the user had just the URL. Either way, this is relevant information as this is obviously what AUT wants to promote the most.

The Homepage:

Screen Shot 2014-09-12 at 12.02.32 pm

Theres actually quite a bit of information displayed here, its just not displayed in large blocks of text, more visually. This page is basically just going to be navigated from depending on what the user is looking for. I’m not too partial the idea of using the first page as a keeping up to date with AUT page, like some sort of newsfeed. The reason I don’t think this is an effective use of the homepage is that if someone really wanted this information they would probably like AUT on Facebook or something. This information is given to users much more effectively through social networking. Gets me thinking, maybe I need a twitter feed? Maybe I need to embed a few of AUTs social networking into the homepage? Lets see what they have

Social Networking

Youtube: https://www.youtube.com/user/AUTUniversity

Screen Shot 2014-09-12 at 12.08.48 pm

 

Twitter: https://twitter.com/AUTuni

Screen Shot 2014-09-12 at 12.11.06 pm

 

Facebook: https://www.facebook.com/autuniversity

Screen Shot 2014-09-12 at 12.13.51 pm

 

Instagram: http://instagram.com/autuni

Screen Shot 2014-09-12 at 12.16.27 pm

 

It could perhaps be an idea to have both a social networking bar, as well as a subscribe bar, or maybe even instead of. Either way, social networking will need to be addressed in the content of the webpage if I intend to remove it from the homepage.

So what really needs to be on the homepage?

Navigation: Obviously there needs to be the navigational menu which has really waaaay to much information crammed into it (or too many navigational options). This is probably not something that can be changed. There also needs to be the navigation bar to Arion, AUT online and maybe Blackboard? There also needs to be a search bar that I think needs to be a main thing of the homepage as obviously you’re coming here to find something else. There is also this weird ‘Quick Links’, which I think is more of a directory which is also really cool, but could be perhaps a main feature of the page, not so much a navigational bar but a row of icons? Like:

candybar-custom-minimalist-mac-icons-2

but obviously relative to what the link is, like a book for study areas or library, a map for campuses and a phone for staff directory. There also needs to be a better footer. The layout is pretty horrible and the social media bar is way to big, I think it’s just filling space. Also, the footer text is way to big, and disjointed, it just doesn’t flow nicely. I’m not sure what I’ll do about this.. I think I would remove the Home, Quicklinks, Connect, Contact and Current Students section as this is displayed on the page, literally one mouse wheel roll away, probably even half. It’s sort of silly to have it twice.

I’ve noticed the big ‘Copyright, 2014’ so I guess I’ll be using Ipsum for most of the text. Great.

I could write my own, but it’s not so much about that. I think I will ask Matt if it is okay for me to use Ipsum for this assignment, seems like it may be a little bit of a copout.

Homepage Content

Links Menu and Descriptions :hovers
Arion, AUT Online and UniCentral links

https://arion.aut.ac.nz/ArionMain/Default.aspx
Arion: Where applying and enrolled students can access AUT course information, check your enrolment status, make fee payments, update your personal details and view your academic results.

https://autonline.aut.ac.nz/
AUTOnline: Online access to course resources and learning activities through AUT’s central learning management system.

https://unicentral.aut.ac.nz/Pages/default.aspx
Unicentral: UniCentral is the AUT University Student Portal. Here you will find useful information about you as a student and quicklinks to all the important online systems you will need to use while studying at AUT University.

Main Menu (Over Image)

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

Secondary Menu (Half way down page)

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

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)

Search Website (top of page)

Course Search (Search Bar 1)

  • 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 (Search Bar 2)

  • Must have a view all button
  • placeholder text ‘e.g Psychology’
  • User must select campus
  • must select level of study
    • Post graduate
    • Undergraduate

News Feature:

 

 

First-in-Family Scholarships to open the door for university study

wg2014

23 Sep 2014

The Woolf Fisher Trust and the Auckland University of Technology (AUT) have combined to establish the Woolf Fisher First-in-Family AUT Scholarships to support and encourage young people from families with no history of successful university education to complete a university degree.

 

BMW Group joins AUT InterNZ Programme

internzbmw

18 Sep 2014

Eleven lucky AUT graduates will be winging their way to the United States early in 2015 to take up paid internships as part of the expanded AUT interNZ programme. Launched in 2013, the programme gives AUT graduates an opportunity to experience the changing world through workplace scholarships in US-based businesses.

This year, BMW of North America joins a group of industry-leading brands and will offer two six-month internships at its regional sales and distribution campus in New Jersey. This is the first partnership of its type for the Group with a university in the southern hemisphere.

 

AUT University opens new centre to boost NZ science and tech education

STEM-TEC Group Shot

18 Sep 2014

Improving the entrepreneurial skills of tertiary students is one of the 15 live education projects at the new Science, Technology, Engineering and Mathematics Tertiary Education Centre (STEM-TEC) at AUT University.  To achieve this, the project is currently establishing a STEM Student Entrepreneurs Club to encourage graduates to stimulate innovation in the New Zealand tech sector.

 

New book integral to promoting Pacific research

Professor Peggy Fairbairn-Dunlop

16 Sep 2014

A new book edited by Auckland University of Technology (AUT) Professor of Pacific Studies Tagaloatele Peggy Fairbairn-Dunlop, and University of Auckland Associate Professor Eve Coxon brings together the work of Pacific researchers across New Zealand universities, raising their profile and the issues facing Pacific communities in New Zealand and overseas.

 

AUT Professor named a finalist in NZ Innovators Awards 2014

Valery Feigin

16 Sep 2014

AUT University Professor of Neurology and Epidemiology Valery Feigin has been announced as a finalist in two categories of the New Zealand Innovators Awards 2014 – ‘Innovation in Health and Science’ and ‘Most Inspiring Individual’.

 Opportunities Feature:

AvroKO Hospitality Group, New York

SUITED TO CANDIDATES:  Graduating with Bachelor of Business majoring in Marketing, Design, Advertising and/or Sales or Bachelor of Communications Studies (may be also good for a Hospitality Management graduate with less of an operations more of an administrative interest).
WORK MAY INCLUDE: Work with the marketing and new business development teams on existing & future AHG venues and client projects. Marketing: database building & management, social media strategy & monitoring, participation in off-site events, event planning and production, collateral production and maintenance. Proficiency in Adobe (Photoshop, illustrator, InDesign) required. New Business Development: research of new opportunities, information gathering, reporting, meeting management and coordination.
PREFERRED DATES:  12 weeks, starting late January 2015 through to late March (with some flexibility).

BMW North America, New Jersey

WORK MAY INCLUDE: Competitor and consumer insight analysis to identify market trends, assisting with retail implementation project management and assisting the region with quarterly market reviews.
SUITED TO CANDIDATES: Bachelor graduates in Business majoring in Sales, Business Information Systems, Retailing or Marketing or graduates from other degree programmes with strong analytical skills and a passion for the motor industry.
To be eligible for this role, you must be an undergraduate in your senior year (Bachelor or Master) or completing your Bachelors degree in 2014 and be intending to continue with post-graduate study in 2016. We are looking for two graduates, one starting in March and one in September.
PREFERRED DATES:  approx. 27 weeks (6 months) per internship, One from March to September/beginning October 2015, the other from September/ beginning October 2015 to March 2016. There will be an overlap of two weeks with these roles.

Kiwi Landing Pad, San Francisco 

WORK MAY INCLUDE: Supporting marketing and communications for Kiwi Landing Pad and its tenants, through a range of activities, in particular social media where a keen interest is vital. Working alongside some of New Zealand’s top entrepreneurs and start up technology companies, this role offers a unique insight into Silicon Valley and the role marketing and communications plays.
SUITED TO CANDIDATES: Graduating with Bachelor of Business or Communications Studies.
PREFERRED DATES: 12 weeks, starting late January 2015.

Paramount Recording Studios, Los Angeles

WORK MAY INCLUDE: Assisting studio staff with general daily duties to maintain the regular operations of the studios. Students with a strong interest in the music business preferred.
SUITED TO CANDIDATES: Graduating with Bachelor of Creative Technologies or Bachelor of Computer and Information Sciences
PREFERRED DATES: 8 weeks, starting January, 2014 (up to four days per week).

Play Rugby USA, New York

SUITED TO CANDIDATES: Graduating with Bachelor of Sport and Recreation or Bachelor of Communications Studies. Applicants with experience in rugby are preferred.
WORK WILL INCLUDE: Half of this role will be office-based and the other half coaching, combining communications and technology skills with coaching, tutoring and mentoring youth in the afternoons.  Office work will have a specific focus on enriching the organisation’s communications platform, creating cohesive content and more effectively integrating & maximizing the potential impact of social media.
PREFERRED DATES: 12 weeks, starting January 2015 (with some flexibility).

PUBLIC Restaurant, New York

SUITED TO CANDIDATES:  Graduating with Bachelor of International Hospitality Management.
WORK MAY INCLUDE: Restaurant front of house operations (serving, hosting, management trails, training and support, scheduling, staff training, review and development); Corporate Office (marketing and PR, payroll, purchasing, budgets). Restaurant back of house operations (culinary stages, menu development and costing, kitchen staffing and purchasing).
PREFERRED DATES:  12 weeks, starting late January 2015 through to late March (with some flexibility).

Red Antler, New York

WORK WILL INCLUDE: Assistance with web design. Applicants with an interest or experience in web design, user interface, and interaction or user experience design are preferred.
SUITED TO CANDIDATES: Graduating with Bachelor of Creative Technologies, Bachelor of Design or Bachelor of Communication Studies with an interest or experience in web design, user interface, and interaction or user experience design. Candidates interested in this role are invited to submit samples of work so Red Antler can get a sense of your design style and identify the type of work you would be suited to.
PREFERRED DATES:  13 weeks, starting 2 February, 2015.

Saatchi & Saatchi NY, New York

WORK MAY INCLUDE: Assisting a range of teams from various departments including creative, advertising, marketing and design.  Candidate’s strengths will be suited to one or more of these departments so the ability to be flexible and adaptable is ideal with a passion to learn essential.
SUITED TO CANDIDATES: Graduating with Bachelor of Business majoring in Advertising, Design, Marketing; Bachelor of Communications Studies majoring in Advertising Creativity, Digital Media or Bachelor of Design majoring in Digital Design, Graphic Design.
PREFERRED DATES: 12 weeks, starting late January, 2015.

Westpac Americas, New York

WORK MAY INCLUDE: General assistance to Westpac’s team in New York City, a fairly small but focused office, offering the suitable candidate insight into the global financial markets.
SUITED TO CANDIDATES:  Graduating with Bachelor of Business majoring in Accounting or Finance.
PREFERRED DATES: 12 weeks, starting January, 2015.

Zolfo Cooper, New York

WORK MAY INCLUDE: With supervision, you may have the opportunity to work with a team in a variety of activities throughout  the restructuring process including building and analysing financial models, preparation of filing for and exiting Chapter 11, preparation and review of business plans, due diligence process. You may support senior members of the firm with research, proposals and pitches or monitor various industry publications and sources to identify troubled companies. You might analyze financial and industry data to research specific issues for targeted companies and maintain reports regarding the status of troubled companies and the firms related marketing efforts for those companies on the watch list. You will adhere to the highest degree of professional standards and maintain strict client confidentiality.
SUITED TO CANDIDATES:  Graduating with Bachelor of Business majoring in Accounting, Business Information Systems, Economics, Finance, International Business, Management.
PREFERRED DATES:  8 weeks, starting January, 2015.

beingAStudent

Pages:
Study at AUT / Being a Student

How many links can we fit on one page? Let’s find out.
I would really like to use the content from this page but I don’t think I can, so back to ipsum we go. I will use the headers however.
I think I will go with the idea of icons again and separating the page into a grid layout, not bullet points. I also need a new navigation menu for Enquire, Apply, Email and Print, while keeping the main menu bar that doesn’t move through out the pages (I guess I’ll need a common CSS).

Also, on this page there is no big ugly footer (whaaaaaaaaaaaaat?) This one looks much nicer. [Side Note: I giggled when the last updated date was Valentines day, aint nobody got time for <3] There is not a lot to this page, and I imagine that there wont be too much to the other pages similarly, just changing the names of the links and where they go and rearranging some ipsum.

 

StudyGuides

 

Guides 2014

This page is basically just links to download the PDF prospectus guides for AUT (22). What I would like to do is make this a grid as well with small captions underneath with a link to that books page on the website. I feel like this page is under utilised and could be a lot cooler as well as offer a lot more information to students. There isn’t really a lot to say here, I will still have common styles as well as a footer and a header, which this page lacks. Either way, the content for this page will be all of the guides laid out in a similar fashion.

 

AboutAUT

 

Contact Information and About AUT

I feel like this is most definitely going to be the hardest page to layout. There is a lot of information here, which is pretty much all needed. I think I need to make a basic layout for one contact information set, and then multiply to use as a template. As for the facts and figures, this is going to need to be in a table, just the table will look a lot nicer. Same thing goes with this page, needing the navigational menus and probably the same footer throughout the whole website. There is some information here that is missing – I would like to add the location (like a map) of where AUT is. I will do this by embedding Google Maps.

 

 

Research Post 2: Bootstrap, and Boilerplate

I’m hoping that by the end of this research post I’m familiar enough with Bootstrap and Boilerplate to feel comfortable in making my wireframes with them in mind. 

Personally, before I get into learning anything I’m completely unfamiliar about, I like to check Wikipedia for a definition, as well as online forums os I have a grasp on what it is I am actually dealing with. 

Bootstrap

http://getbootstrap.com/
Bootstrap is a free collection of tools for creating websites and web applications. It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions. Bootstrap was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. Before Bootstrap, various libraries were used for interface development, which led to inconsistencies and a high maintenance burden.

Features

Bootstrap is compatible with the latest versions of all major browsers. It gracefully degrades when used on older browsers such as Internet Explorer 8. Since version 2.0 it also supports responsive web design. This means the layout of web pages adjusts dynamically, taking into account the characteristics of the device used (desktop, tablet, mobile phone). Starting with version 3.0, Bootstrap adopted a mobile first design philosophy, emphasising responsive design by default.Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.

So basically, it’s an open source tool for front-end developing. It aims to maintain constancy, as well as make the whole process of creating websites and web applications a lot easier for developers.

What can you actually do with Bootstrap?

Bootstrap consists essentially of a series of LESS stylesheets that implement the various components of the toolkit. A stylesheet called bootstrap.less includes the components stylesheets. Developers can adapt the Bootstrap file itself, selecting the components they wish to use in their project.

Adjustments are possible to a limited extent through a central configuration stylesheet. More profound changes are possible by the LESS declarations. The use of LESS stylesheet language allows the use of variables, functions and operators, nested selectors, as well as so-called mixins.

Grid system and responsive design comes standard with a 1170 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

The CSS stylesheet

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide a uniform, modern appearance for formatting text, tables and form elements.

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar.

JavaScript components

Bootstrap comes with several JavaScript components in the form of jQuery plugins. They provide additional user interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)

HTML5 Boilerplate

Naturally, a boilerplate is something that can be used again and again, so I had a feeling this would be something along those lines.

HTML5 Boilerplate helps designers get started with the new standard by offering a professional front-end template that allows them to create a fast, robust and adaptable site with a set of HTML5-ready features and elements. It was created by Paul Irish and Divya Manian and is an open source project that is perfect for creating cross-browser sites that work with older browsers, while being HTML5 ready.

What’s in HTML5 Boilerplate?

  • HTML
  • CSS
  • JavaScript
  • .htaccess (Apache web server configuration)
  • Crossdomain.xml
  • Miscellaneous (ignore file, gitignore and so on)

Modernizr is also included in order to allow developers to style the new HTML5 elements in Internet Explorer (IE) and helps with detecting HTML5 or CSS3 features in all browsers, including earlier versions. It also fixes a lot of the CSS for older versions of IE, as well as IE classes that apply to the tag. This validates as HTML5 and the no-js class allows you to add custom styles when JavaScript is enabled or disabled in the end-user browser.

You can also use HTML5 Boilerplate with Initializr which generates templates based on Boilerplate that allow you to choose the elements you want and those you don’t. With this, you also have the option of using a responsive template from the outset, rather than starting with a blank page.

http://www.sitepoint.com/introduction-html5-boilerplate/

Getting started

The basic structure will look something like the below in the first instance:

.
├── css
│   ├── main.css
│   └── normalize.css
├── doc
├── img
├── js
│   ├── main.js
│   ├── plugins.js
│   └── vendor
│       ├── jquery.min.js
│       └── modernizr.min.js
├── .htaccess
├── 404.html
├── index.html
├── humans.txt
├── robots.txt
├── crossdomain.xml
├── favicon.ico
└── [apple-touch-icons]

So, let’s look at how these can be used, starting with CSS, the directory which should contain all of your site’s CSS files. Note that this directory already includes some CSS to help you get started, as well as the normalize CSS.

The starting CSS includes:

  • HTML5 Boilerplate defaults
  • Common helpers
  • Placeholder media queries
  • Print styles

This doesn’t rely on conditional classnames, conditional style sheets or Modernizr and can be used ‘out of the box’, whatever your development preferences.

Icons

Boilerplate also provides a ‘starter set’ of favicon and apple touch icons that you can replace with your own. The apple touch icons also work with numerous browsers and devices, according to Boilerplate developer Paul Irish, who also helpfully provides a walkthrough of the code. A quick web search will show that it’s quite difficult to find anyone that doesn’t have a good word to say about HTML5 Boilerplate and that it has generated a good few articles on the best snippets to use.

There’s no doubt that the template makes it easier to begin coding in HTML5 and what’s more, newer elements are simple to work with and can make for a great-looking site.

 

So, after all of this, I’m really beginning to understand what boilerplate and bootstrap can offer me. I’m still a little hazy on the differences between the two and how they manage to marry up so well, but I’m sure it will all come to light once I start working.

Themes

https://wrapbootstrap.com/themes/page.1/sort.price/order.desc

So, themes are a thing. I’m going to look at themes to get an idea of what other people have achieved and see if I can achieve something similar if I find something I actually like the look of.

Screen Shot 2014-09-25 at 4.11.03 pm

 

Screen Shot 2014-09-25 at 4.12.15 pm

 

I really love this website, funnily enough it has the same thing going for it that I had in my initial ‘pre-research’ wireframe, with a grid layout and a header that basically took up the whole screen. I’m a big fan of this sort of website as it really puts on a show and displays things in a really in-your-face way. If you’re making a website for something that needs to make a stand, this is the way to go. I feel as if this would work well for a university as the website is a promotional website after all and the website really needs to showcase everything that is inspiring about AUT. This sort of website with perhaps a carousel would be great.

Screen Shot 2014-09-25 at 4.16.45 pm

Ahh! These are great! They’re exactly what I had envisioned in my head with a few minor differences! Which is great because it means I can do what I want to do without working against BP and BS.

This website is so clean! and it works really well. Everything fades as you scroll down which is really nice, I’m a big fan of it. To me it seems like the selling point is this idea of responsive, and that designers no longer have to be too careful about this as the website automatically knows what to do when the page is being viewed on a device.

Screen Shot 2014-09-25 at 4.19.59 pm Screen Shot 2014-09-25 at 4.20.35 pmRealistically, this is giving me a lot of good ideas of what I can produce, and what I need to produce. It’s also showing me that there is so much possible, and that my initial design idea of wanting minimal colours, shapes and blocks is sort of in fashion for web at the moment. It’s also getting me thinking how each page is going to look.

AUT Guides Page:

A page that I was worried about was this guides page. I’m really unsure on what to actually do with it, so I’m going to use this section of the research post to think about how I may go about laying this out.

Screen Shot 2014-09-25 at 4.24.10 pm

This works, but I don’t feel the images are the correct ratio to give me a fair enough idea of what I’m going to be producing. This is still really cool.

Screen Shot 2014-09-25 at 4.26.44 pm

 

Another thing to think of is that I don’t even have to use the images that AUT uses to show their guides. I could very well just write descriptions and maybe create icons (or use favicons) to sort of sum up the content. Just a thought.

Screen Shot 2014-09-25 at 4.29.44 pm

 

A search bar would be good for the guides, but also I need one predominantly on the main page as the homepage is probably just something the user will navigate from looking for information.

The homepage and the rest of the pages, (except the guides page) will look consistent. I’ve got a few good ideas for the layout now based on bootstrap and boilerplate, what I really need to think about is the fact that the look is nice to get down, but I also need to show information in an effective way. I need to look at what other university websites are doing and then think of a way to effectively show this information.

 

Research Post 5: Typeface Research

In this research post I want to talk a little bit about website readability before I get into my font choices. The website I am creating seems to have quite a lot of content so I think it’s important to look at readability.

Readability is one of the more important aspects of Web design usability. Readable text affects how users process the content. Poor readability scares readers away from the content. On the other hand, done correctly, readability allows users to efficiently read and take in the information in the text. You want users to be able to read your content and absorb it easily.  – Matt Cronin

source:http://www.smashingmagazine.com/2009/03/18/10-principles-for-readable-web-typography/

There are many factors that play into the readability of text. There are also a number of terms, all very important. Matt defines the top 10 factors as hierarchy, navigation, contrast, line-height and line-length, friendly headers, scannable text, focus point, white space, consistency and density. He also defines a few more aspects, but for post length purposes I’m only going to talk about the ones that are relevant to me.

Hierarchy
Every typographic layout needs hierarchy. Hierarchy defines how to read through content. It shows the user were to start reading and where to read through. It differentiates headers from body text. Hierarchy plays a huge part in how scannable a layout is. It is an important technique that needs to be mastered to achieve readable Web typography.

The hierarchy in my website needs to be quite obvious – I think I need to make my headers quite prominent as there will be a large amount of text on the page that needs to be split up.

Contrast is the core factor in whether or not text is easy to read. Good contrasts will make text easy on the eyes, easy to scan quickly, and overall more readable. On the other hand, poor contrast will force the user to squint and make reading the body text almost painful, not to mention a lot slower.

As shown in the following illustration, black on white is very readable. Black on white is obviously the standard contrast colours, and to achieve readable content it is good to stay in the range of black-on-white contrast. However, pink on blue, is nearly impossible to read. For this reason I’ve decided to stick with black on white or black on grey-dark white.

Line height is a very common term meaning the space between individual lines of text. Line height is another factor in the readability of body text and even headers. Sufficient line height is especially important in Web design because it makes the text ultimately more scannable. Line height that is too short will cause users to squint while reading. If it is too large, the text will seem like separate bodies instead of grouped together as one. Bootstrap has a predefined line height so this should stay the same.

Matt Corins ‘Do’s’

 

1.  User-Friendly Header

Headers are a key element in typography.  As mentioned, they are part of the text hierarchy and a major factor in scannable content.

First off, header size is just as important as the size of the body text. Going too big with the header with a large amount of content can throw the user off balance when reading and cause them to lose their spot. It will ultimately ruin the flow of the content and be a distraction. Headers that are too small will ruin the hierarchy of the article, too. If the header is too small, it will not draw the user’s attention as it should.

Next, it is important to provide ample space between the header and body text.

2. Scannable Text

Scannable text goes hand in hand with readable text. Making copy scannable consists of good use of headers, hierarchy and focus points to guide the user through the content.

3. White Space

In content-heavy layouts, spacing contributes to the readability of content. White space helps to offset large amounts of text and helps the user’s eyes flow through the text. It also provides separation between elements in the layout, including graphics and text.

5. Density of Text

Density of text refers to the amount of words placed in one area. Density of content has a major impact on readability. Density is affected by spacing options such as line height, letter spacing and text size. If you find a balance between all of these so that the content is neither too compact nor too widely spaced, you will have perfect density that is both readable and scannable.

6. Organisation of Information

The way you organise information in an article can strengthen readability. Users are guided with ease through content that is properly organised because information is easier to find. This veers into issues beyond the scope of this article but is still very important.

7. Use of Separators

Separators are a simple and easy way to divide text into sections in a clean and organised manner. They can be used to divide hierarchy elements, such as headers and body text. They can also be used to divide content into sections.

The simplest form of divider is a single line. These are most often used to divide hierarchy elements and are very useful for making subtle divisions that still play a big role in readability.

Another common way to divide content is to use boxes. Text boxes are excellent for separating unrelated content on a single page. They help move the user’s eyes through a complex layout. Below is an example of this on Pixelmator’s website. It uses boxes to separate content in a clean way. Notice how the boxes are defined by their background instead of a border.

8. Good Margins

Margins also support the article in another way. They help separate content from the rest of the design and layout. Text shouldn’t bleed into other layout elements, especially if it is a long article. Margins help define the article and its separation.

 

Fonts

I didn’t spend a lot of time looking at fonts, for once I think I decided pretty quickly (fonts is something I usually play around with until due date).

I stated off with dafont.com and looked at ‘Bebas Neue’Screen Shot 2014-10-29 at 7.27.54 am

 

I liked this font a lot and I used it for the logo I designed for AUT. But once I implemented it into the CSS I knew it didn’t look right on the webpage. Obviously I was only using it for headers and I had been using ‘Open Sans’ for the spans and paragraph tags but Bebas Neue just didn’t look right. It seemed to make the website look like something else and the text was just far to heavy for the look I was going for. I decided that the best call would be to search for another font – while I did so I used ‘Open Sans’ as my font

Screen Shot 2014-10-29 at 7.31.20 am

 

I looked at fonts for a little while but I felt Open Sans had so much variety with font weight I didn’t really need to go looking for another font.

 

Research Post 4: Site Images Reseach

In this research post, I want to talk about my images and other various aspects of the site.

campusesHeader

 

Headers & Dividers

Most sections in my website are headed with an image used to block out a section of text as well as act as a background to titles. I’ve done this to aid readability, also the images act as a new header each time the reader approaches a new section of the website. They also act as a catch for the smooth scroll aspect of my website. They also help the flow of the website and look really good both expanded and contracted.

applydivider2

The use of blurring makes it easier to concentrate and read what is happening onto of the header, whether it be a title or another image. I also blurred these images as there are a lot of them and I didn’t want to distract the reader from the content of the page.They have a low opacity colour blur over the top of them to make them all look at least similar. This helps the website look more uniform and gives it more of a brand. My dividers and headers are interchangeable at times so a lot of what I said about headers also goes for dividers.

 

milThumb04

 

Images

The images taken from auts website (aut.ac.nz) remain unedited as these are informational images and the information they pass should not be altered in any way. It is important that these images are of a high quality and actually true to the information they’re passing (like the image above is AUTs National Training Centre)

Screen Shot 2014-10-29 at 7.51.47 am

Permission

I had to email Matt in the end as I couldn’t get permission for the images off of AUTs website – they never contacted me back. I guess this is just a reality and this stuff happens. I just hope I don’t get asked to take the website down before it’s marked.

cultural

Other Images

All my other images are basically just creative commons images from Flickr. Although it was difficult to find images that could pass as being from AUT – it was a whole lot easier than trying to get permission for another whole lot of images. Event the images in my gallery are just from Flickr. All I needed was images that looked the part.

modalHeader

Modal Header 

Although it looks funny here, I promise it looks okay on the website.
I just made this so my modals didn’t look so blank and so they were part of the consistent branding across the whole website.

04

Step by Step 

I created these images the same way I created most for my website – blurred background with the same ‘leak lights’ and this time I used ‘font awesome’ icons in Photoshop to get the icons to relate to the step in the guide for applying for AUT.

Background

I just went with a basic white background this time. The ultimate ‘unbusy’ background.

1. Don’t use busy backgrounds on your pages:

  • You want to do all your styling in CSS.
  • Background tiles are usually bad news.

Once upon a time tiled backgrounds were all the rage on the Internet; these days most have understood that it’s just a bad idea. It can work if your tile image is not noisy and is a solid colour, but if you use tiles that are of, say, a picture of your dog or some other bold image, it will make your page unreadable.

source: http://www.killersites.com/articles/articles_dosAndDontsPart3.htm

Image Behaviour: Buttons and Links

Two points outlined in the webpage above are:

1. Always try and make things as clear as possible to your visitors.

2. What may be obvious to you may not be obvious to your visitors!

With this in mind I think I need to go back and have a look at my images and perhaps place a hover over them so that it is more obvious that my images are links and can be clicked as well as the actual link posted below them.

Image Colour

Colour is a way for people to identify things; that is why the Coke label is dominantly red and the Pepsi label is dominantly blue. Keep the colour scheme of your web site limited to a couple of colours and keep it consistent across your site unless you want to denote some major section.

I’ve done my best to keep all of my images consistent and have a similar range of colours (apart from the information images).

A post I found really interesting to read was: http://www.nngroup.com/articles/photos-as-web-content/

This post outlines the way people read images on websites in regards to content. Images are basically just breezed over but it is important for them to have consistency in creating a brand across a website – this is what I am hoping to achieve.

 

Research Post 3: Layout Research

I thought it would be best to try and understand unique bootstraps ‘scaffolding’ before I tried to layout my website.

ToolsetBootstrap_layouts_20

Grid Systems

The default Bootstrap grid system utilizes 12 columns, making for a 940px wide container without responsive features enabled. With the responsive CSS file added, the grid adapts to be 724px and 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically. For a live preview of this system go here: http://getbootstrap.com/2.3.2/scaffolding.html I actually fond this really helpful and I’ve found myself going back to it again and again to help me adjust my layout.

Implementing a Basic Gird into HTML

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each.span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class=“row”>

<div class=“span4”></div>

<div class=“span8”></div>

</div>

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

custom-sf-layout-1

From here, my basic understanding is that you can offset a column as well, this changes the percentage of the page this column utilises. I think this will come in handy when coding things such as my ‘up coming events’, as I could have a calendar on one side, and a description of what is happening on that day on the other. These wouldn’t need the same amount of space as obviously one is going to require most space as it would have more information.

Offsetting a Column

(I like pasting this sort of stuff into my research as it helps me get my head around it as I will read and re-read until I understand it. Plus I also always have my research open when I work)

Move columns to the right using .offset* classes. Each class increases the left margin of a column by a whole column. For example,.offset4 moves .span4 over four columns.

<div class=“row”>

<div class=“span4”></div>

<div class=“span3 offset2”></div>

</div>

Something else I think I would find quite helpful is ‘nesting’. As I can make a two column layout – and then break one column into 2 more columns and offset them to create a sectioned view where one piece of information is displayed larger than the other.

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

twitterbootstraptutorial-300x300

Something I really need to think about is how this webpage is going to display on each device. I don’t believe this assignment has a section where you have to test and report back about how different browsers deal with different content (browser test report). But I feel it would be quite interesting to look at how my smartphone deals with the layout compared to my iPad and iMac. I’ve noticed a huge difference between my Macbook and my iMac and I feel that my website so far looks very sparse on a big screen – which I guess is good and bad. Considering my audience is students, and students mostly use the computers at the university (which have big screens) this could be a bit of an issue. I mean, if I was making this for an actual client this would be something I would address by setting a max-width for the page, but I’m not .. so I wont.

‘Gridding’ for Each Page (bar homepage)

Pages such as guides pages, community pages and study areas pages would benefit from a large amount of information being accessed quickly. I think the best way to do this would be a grid of photos that clearly dictate what will be expected from that page you go to.

4-col-portfolio

 

A 3 – 4 col grid of images would probably be best. Like a gallery of links that take you to different communities, prospectus guides and study areas. It also makes me wonder how I am going to get to the next page. Will the user just click and the image will act as the anchor for the next page? Or should there be icons that take you to the next page?

WB059X072

I think icons could be cool … you could make a ‘download guide’ icon, a ‘read more’ icon and maybe a ‘share’ icon? I’m not sure how that would word but I’m sure I could look into it.

Prospectus Guide Page

A page that I was actually considering making was the page that is linked to above. Like, creating a page for a course and listing its majors and minors.

1-col-portfolio

I think this would be a really good idea and a nice and clean way of getting across information – what AUTs current website is lacking.

Pinterest Layouts

After finding the gem of pinterest, I decided to have a look at a few layouts and talk about what I like and dislike about them.

4
I hate the header of this website – but I love everything else. I’m not sure if having the social media icons at the bottom so small is such a good idea but I guess if they’re not there to advertise (the main reason most make websites) .. it doesn’t really matter. I love how the sections are mapped simply by two shades of grey, and the footer and header share the same colours. Layout wise, I think this is great. A little sparse but I think thats just a thing we have to put up with these days, and that we can’t go throwing millions of bits of information on a huge screen until we know everyone we hope to have as a viewer-base and even those that we don’t, have huge screen. You shouldn’t limit your audience from the get go, and doing this would basically rule out mobile users and isn’t the mobile user-base the only reason most websites are moving towards responsive? I love how this is just panels. Sections of information shown in a real clean way.

2

Design wise, not a big fan of this website – but I quite like the layout. The grids seem really tight and compact and they just look the part … not all spaced out. The black really works for them but I guess that is just because their images are so clear and colourful. I think I will keep my background as white as it was one of my main concerns with AUTs current website – why the heck is it so dark? The pull on these buttons doesn’t really make sense, it’s not consistent – which really annoys me. Consistency will be my biggest pet peeve I think.

3

Oh how this website has over done it with the bloody effects. Oh my god! Way to ruin a beautiful layout! Live preview here: http://www.detheme.com/selector.php?theme=zeyn-corporate I think more than anything I just like the design and layout of this website waaay more than I should. It would be so much cooler without all the jQuery crud though. The parallax is really cool and it makes me want to get parallax working on my webpage because it would totally work but I’m just not sure of the risk-reward of doing it.

For now, I think I will leave this post. It’s given me a lot to think about before starting my layouts – which are a pretty basic thing … it’s just getting into a frame of mind where bootstrap and the way it works are prominent in the way I layout my website.