Design Decisions
submitted by christine.logan STEP 1
I think a lot of the decisions about UNLV's page structures in general are actually made because of Drupal. Each page is using a Drupal template consisting of what I like to call the "Drupal bar" and a footer. On UNLV pages, the Drupal bar consists of the UNLV logo and three links. The footer varies depending on the department.

In the event this design or any similar design may be used by UNLV in the future, I know that it will have the Drupal bar and the footer added to it. Adding them in as part of the overall design now, rather than trying to make everything look good around them later, could save a lot of potential headache.

Also, I should point out here that Drupal likes things in column formats. One column, two column, three column, and four column layouts are found frequently throughout UNLV's pages. These formats can be "mixed" on one page, but are unique to each page section. Most UNLV pages consist of one to three sections, not including the header, navigation, or footer.

  • The Drupal bar and footer from the UNLV Libraries main page were used in this design.
  • The design for content on all pages was made with Drupal's column format in mind.
Existing Pages
submitted by christine.logan STEP 2
Part of my job in redesigning the CML website is to look at the existing CML website to figure out what they are trying to move away from, and to look at the UNLV main page and the UNLV Libraries main page to figure out what they are trying to move towards. Considering this is a UNLV page and more specifically a UNLV Libraries page, everything should look similar. However, I would assume the content currently on the CML website needs to stay on the CML website.

The one thing that both the UNLV main page and the UNLV Libraries main page have in common is the navigation bar. Both use a grey bar with red text, and the navigation link for the item being viewed currently has a white background. Since that's in both pages, it definitely needs to be in mine. On each of the UNLV Libraries pages, there is a header telling you what branch of the library the page belongs to, the hours that branch of the library is open, and a search bar. I see that a version of these things exists on the current CML website, so they should be updated to look more like the ones for the rest of UNLV Libraries.

UNLV in general seems very fond of Flexslider. Flexslider can be used as a WordPress plug in, so it probably can be used as a Drupal plug in too. Every single main page at UNLV is using it. I feel that I need to have a slider or slider-type object on the page for it to truly fit in as a UNLV page.

  • The background for each page is a light greyish-white color.
  • The main content box is white with shadowing, just like the UNLV Libraries main page.
  • The design for content on all pages was worked around the currently existing content.
  • The navigation bar is the same style as the ones on the UNLV main page and the UNLV Libraries main page.
  • Each page of this design is outfitted with the text "Curriculum Materials Library", as well as the hours and a search bar.
  • There is a slider-type object on the design for the home page only.
Be Unique
submitted by christine.logan STEP 3
Just because certain elements need to be included in a page doesn't mean they need to be a direct copy from related pages. The two elements that I included that I may have made differently or left off should the page not be a UNLV page are the navigation and the slider-type object. To make them look more unique while still fitting in with the theme, I drew inspiration from the UNLV main page and the UNLV Libraries main page.

Most of UNLV's pages have a white or light grey background. While a plain background would have worked on this page, I wanted a little more interest than just a solid color. The UNLV Libraries main page is using a light to dark grey background filled up with many squares. While I like this background, I felt that it provided too much of a distraction with my design for the CML website. I ended up just playing around with many brushes and textures in an image editing program and testing them all out with the design. When I got to the current background, I knew it was the right one for this design so I kept it.

The navigation looks almost like a ribbon bending around the main content box. I got this idea from the UNLV main page header, which to me looks like a bar has been lifted over the navigation. I pulled that bar down into part of the navigation and made it look more like a ribbon to fit the theme.

I noticed many little icons were being used on the UNLV Libraries pages, so I decided to add some icons to the navigation to make it stand out a little more. I also thought that having icons could be useful when designing the site for mobile use.

For my slider-type object, I went for an auto-flipping book. The first thing I see whenever I walk into the CML is books, and I felt that seeing a book first on the CML website was only fitting. For my design, I was really inspired by the way the UNLV Libraries logo looks like a row of books. I put that together with an idea I got from the current CML website, where the corners of the main content box almost look like a page corner being turned. It's definitely not Flexslider, but I still feel like it's a good fit for UNLV.
Homepage - In Detail
submitted by christine.logan STEP 4
It's never a good idea to put too much information on your home page. After talking to a few people who use the CML, I discovered that most people only use the website to get information quickly. The less they have to read, scroll through, or click to in order to get to where they want, the better.

Therefore, I've designed the homepage with simplicity in mind. The navigation at the top should bring most people to where they need to go, should they have an idea of what they're looking for. The homepage mainly exists for the people who aren't quite sure what they're looking for, and don't have an idea of where to find it.

Welcome to the CML
As I mentioned before, the first thing that people will see when they come to this website is a book. Not only does it tie into the theme, it offers useful information that people might be interested in knowing about the CML. While the book does have the autoflip setting on, people can turn the pages themselves using the arrows on either side, or see a preview of the next page by hovering over the side of the book. In the future, it might be a wise decision to add more pages to the book, to discuss even more services that the CML offers. For the most part, anyone not sure what they're looking for will be looking through this book to see if the CML is even the place they need to be.

Important Information
If someone already knows what the CML offers, but just isn't sure where to find information about it on the site, their next stop will most likely be important information. Instead of making people scroll through a lot of information they might not need, I've cut this down to a small box where the content changes depending on what someone selects. The first information seen is popular content at the CML, because many times those will be what people are looking for. In the event they're looking for other information, they can select something from the list on the left to change the content of the information box. I tried to put information here that people would find useful to have right on the front page, instead of digging around the site to get to it.

News and Current Events
Finally, people might be interested in seeing current events that are happening at the CML. Instead of having all posts visible and breaking the home page into two separate pages, I propose to keep the most current content or relevant information on the home page, and move all other posts to an archives page. The page you are on right now is an example of what the archives would look like, and you can get here by clicking the "read the archives" link on the home page of this redesign. Ive designed each of these blog posts to look more like a newspaper article, while still leaving room to say who submitted the post and at what time they did so. By having each post outlined, I feel that people can more easily scroll through the news to read about what they're interested in.

The Headers
Technically, the home page could exist without headers. However, I feel it helps a lot to break up the content so people know exactly what they're looking at. It never hurts to have a friendly welcome on your site, and without the important information or news being labeled, people might not know what they are and therefore wouldn't look at them. The design for the headers was pulled directly from my design for the subpage headers, to give a continuous feel to the website and really link the pages together.
Subpage - In Detail
submitted by christine.logan STEP 5
The subpage that I chose was the "collections" page. I chose this one because I felt that "research" and "services" had too much content to be scrolling through when you're looking mainly at page design, and I felt that "how do i...", "about", and "contact" all had too little content to truly highlight my design skills.

The original collections page features a picture and a little bit of information about the collections at the CML, and then links you to various other pages via a side navigation. When I clicked on these links, I found that each page contained very little content. Personally, I don't enjoy having to navigate through a site only to end up at a page containing one paragraph of text. I decided that each of these small pages could take up a section of the main collections page so that people could just scroll through if they want to glance at everything, rather than having to click each link individually to find what they are looking for.

In-Page Navigation
The links are still good to have if someone knows exactly what they're looking for, and I don't want to inconvenience those people. Therefore, I've moved the side navigation up to the top of the page, where it now rests under the main navigation. Clicking on one of these will scroll the page down to that section, which I thought was smoother than a simple page jump. The links are separated by a small vertical bar, and when hovered over the links will become more spaced out. It doesn't take up a great deal of space on the page this way, but it is still there and noticeable for the people that find it helpful. Also, at the end of each section I have included a "back to top" link, which will make the page scroll back to the top when clicked.

Collections: An Introduction
Since the introduction to the collections section is not very long, I decided that it could reside next to the image. Putting the information next to the image, rather than under it, will help save space on the page so that the main focus becomes the specific collections. Putting the text directly underneath the word "Collections" will make people more likely to read it, especially if they aren't 100% sure what the collections actually are. Using a different font for the introduction than the following sections of the page helps to differentiate between information about the collections in general vs. a specific collection the CML offers.

Various Collections
I assembled the collections in the same order as the original navigation and with the same content that was on each of the original pages. I didn't want the column for each individual section to be the same width as the above column for the introduction text, because I felt more room needed to be dedicated to the indivudal sections. I also wanted the header text to be right aligned to offset the "Collections" header, and I also wanted the text to the left and the small information boxes to the right, since we read left to right. Eventually I decided to make the headers with lines through them to help separate one collection from the next. The line to the right comes from the far right of the column to approximately the edge of the above photograph, and then I have the text and a longer line to the left. This helps make the header text look right aligned for the original column, while still showing that additional space is available for the text in each section.

Information Boxes
With the leftover space on the page, I decided to add some small boxes with information. These boxes were used in the original CML website design, and I think they can be very helpful to students looking for information quickly. I didn't see any boxes on the CML website that particularly fit in with the theme of the collections, so I simply used the ones that were originally offered on that page. In the future, I would recommend putting in additional boxes - ones that give the location for each collection, or directions for how to use them. Maybe even current updates on what items have recently joined the collection could be useful. You'll notice that the information boxes here have the same style as the information boxes on the homepage, letting students know that "important information" still remains important information on every part of the site.
Mobile Design
submitted by christine.logan STEP 6
I know I wasn't asked to do a mobile design, but I always strive to fit my pages to the smallest screen size out there. For the purpose of this design, I am assuming that everyone has a screen at least 320px wide. I am a strong believer of content-driven breakpoints - when something no longer looks good on a screen, that's when the design needs to change. However, with the type of design I have chosen, it's important to make sure that breakpoints also fit a general range of devices so that nothing looks "too small" on a screen. I have included four breakpoints total for this design, approximately one for each device view.

Breakpoint 1: Landscape Tablets and Small Screen Viewports
Breakpoint 1 happens at approximately 1000px, which is when the original design can no longer be seen on the whole screen. There aren't many changes in design at this point - everything just looks a little smaller. The main change that happens with this design is on the subpage, where the information boxes now rest on top of the sections, rather than beside them. Leaving them on the side would make the content too small to read on both sides, and moving them down to the bottom of the page would make the information not as accessible to students and faculty. The footer has also changed in layout because of the smaller width.

Breakpoint 2: Tablets in General
The first noticeable change at breakpoint 2 is the subtraction of text from the navigation bar. The icons become very useful here, and provide an explanation of the page with simply the image. The house is for the home page, the folder is for research, the book is for collections, the group of people is for services, the "information i" is for the FAQ, the university symbol is for about, and the envelope is for contact. On the subpage, the additional navigation has become two lines instead of one. The layout has now also changed to an entirely one column layout, to preserve text size and clarity. Again, the footer has changed a bit in layout because of the smaller width.

Breakpoint 3: Portrait Tablets and Large Landscape Phones
Breakpoint 3 is almost the same as breakpoint 1 was - a smaller version of the same thing seen in the last design. The most major change seen here is in the header. The title is now on top of the search bar instead of next to it. Since the design for the UNLV Libraries search bar is rather large, continuing to put it next to "Curriculum Materials Library" would make it stand out a little too much. By putting it underneath "Curriculum Materials Library", it is still visible, but doesn't outshine the title. Everything has now been placed in approximately its final location for the last breakpoint.

Breakpoint 4: Smart Phones in General
Nothing says "I'm using a smart phone" quite like this last breakpoint. The neat effects on the navigation have been done away with. The images are no longer on the slider. The additional navigation on the subpage has now been broken into one line for each link. Everything has basically been stretched out to the edge of the viewport, where a truly responsive design takes over from the original media queries. However, nothing has really changed much in the actual design. As long as your screen has a width no smaller than 320px, everything should look fairly similar to the layout used in breakpoint 3.

Help! My Screen is Smaller Than That!
Most people are not going to be using a screen size smaller than 320px, which is the CSS width of the original iPhone in portrait view. Since the iPhone's release, many phones have followed it in screen size to at least be the same, if not larger. However, for people with older and smaller smartphone screens, all content can still be viewed on the page in the same format as the last breakpoint by using a sideways scroll.
Browser Compatibility
submitted by christine.logan STEP 7
Browser bugs aside, the main issue with browser compatibility is space. Everything that looks perfect in Chrome, Opera, and Safari is usually one or two pixels off in Internet Explorer and Firefox. Certain parts of the design were made a bit smaller so that nothing broke off in these two browsers. Safari's over-boldness of text prompted more use of text shadowing than bold text - though certain text was still designed to be bold. A bit of extra space was used with bold text designs so that nothing was awkwardly placed in Safari. None of this really had a big impact on the design as a whole, but it did determine how much space everything could realistically take up on the page.