UNL Portal Design Process Book Randall Owens by Randall Owens

UNL DESIGN PORTAL

PROCESS BOOK RANDALL OWENS

TABLE OF CONTENTS 1. Design Goal 2. Inspiration 3. Wireframes 4. Design I 5. Field Study 6. Design II

DESIGN GOAL

The goal of this project was to design a portal for UNL Graphic Design students to find information and community. During this design I kept the user in mind as well as the possible admin of the website and made it easy to manage while still being pleasing to the eye.

INSPIRATION

Inspiration was a huge part of my process for this assignment. I constanly looked up websites and studied how their button and images were laid out so that I could understand my layout better. I found inspiration in websites like The nytimes.com, cracked.com, and Themeforest.com. Themeforest inspired me the most with itâ&#x20AC;&#x2122;s array of wordpress and news site themes.

WIREFRAMES

DESIGN LOGO

NEWS & EVENTS

RESOURCES

JOBS & INTERNSHIPS

COMMUNITY

FEATURE ARTICLE Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in commodo ipsum. Duis sit amet metus leo. Proin elementum ullamcorper justo, ac euismod arcu fringilla sed.

INTERNSHIP LISTINGS TAGS TESTIMONIALS

COMPANY PROFILES

TAGS TAGS LISTING INFO INFO

POLICIES

After gaining inspiration from the various websites my next step was to start wireframing my design. At this point during the design process we were in groups and the designs for each group looked a lot different. We were designing one website as a class, so this means diferent groups of people handled different parts of the website. This led to the web pages and sections having different feels and layouts. It wasnâ&#x20AC;&#x2122;t as a cohessive a website as we would have wanted.

RESOURCES

LISTING INFO INFO LISTING INFO INFO

DESIGN LOGO

NEWS & EVENTS

RESOURCES

JOBS & INTERNSHIPS

COMMUNITY

News & Events On Campus

Local

Dates &Deadlines

Lorem Ipsum Phasellus lacinia massa eget ligula iaculis aliquet. Nulla pellentesque non velit nec lobortis. Aliquam non mollis urna, in semper sapien. Nulla eu tortor nec sapien venenatis cursus. Pellentesque ultrices auctor iaculis. Date

Calendar

All Events

Lorem Ipsum

Social M ediaFeed Phasellus lacinia massa eget ligula iaculis aliquet. Nulla pellentesque non velit nec lobortis. Aliquam non mollis urna, in semper sapien. Nulla eu tortor nec sapien venenatis cursus. Pellentesque ultrices auctor iaculis. Date

Phasellus lacinia massa eget ligula iaculis aliquet. Nulla pellentesque non velit nec lobortis. Aliquam non mollis urna, in semper sapien. Nulla eu tortor nec sapien venenatis cursus. Pellentesque ultrices auctor iaculis. Date Phasellus lacinia massa eget ligula iaculis aliquet. Nulla pellentesque non velit nec lobortis. Aliquam non mollis urna, in semper sapien. Nulla eu tortor nec sapien venenatis cursus. Pellentesque ultrices auctor iaculis. Date

DESIGN LOGO

NEWS & EVENTS

RESOURCES

JOBS & INTERNSHIPS

COMMUNITY

TIMOTHY MEEHAN - <INTERNSHIP PLACE>

Sheena Pass - <Place>

INTERNSHIP LISTINGS TAGS TAGS TAGS

< SEE MORE >

Megan - <Place>

LISTING INFO INFO LISTING INFO INFO LISTING INFO INFO

< SEE MORE >

DESIGN LOGO

Events “NAME OF

JOBS & INTERNSHIPS

COMMUNITY

BACK

SELECTED EVENT” Z

Location: Lincoln, NE 6850 Admission Cost: (price

Sample tex t about even t

RESOURCES

On Campus

Event Date: XX/YY/ZZZ

Admission

NEWS & EVENTS

8 )

Type: General

Lor em ipsum dolor

sit amet, consectetur

turpis et purus laor

eet consequat. Nulla ut ar

adipiscing elit. Fusce quis cu in lacus ultricies

porttitor . Ve stibulum pellentesque egestas est, ut fringilla tellus vulputate ac. Fusce sagittis turpis et quam pellentesque, quis tincid unt magna facilisis. elit, quis semper

A enean sed tincidunt ante. Quisque venenatis dui lectus vehicula sed

. (image name/description

)

DESIGN LOGO

NEWS & EVENTS

RESOURCES

JOBS & INTERNSHIPS

COMMUNITY

Local

Paid

Mid Level

Out of State

Entry Level

Tags

Graphic Design and Web Design

Saved Internships

Consorte Marketing Hoboken, NJ

Help with web designs as well as tabletop game design projects

$ Paid

Summer

Internship Info

Deadline: 4/22

Entry Level

Healthy Hair Care Eatontown, NJ

Internship Info

Seeking a tech savvy individual who has experience editing photos and videos in order to help increase the marketability of our product

Internship Info

Marketing Design

Spring

Graphic Design and Web Design

Consorte Marketing

Internship Info

Hoboken, NJ Internship Info

Help with web designs as well as tabletop game design projects

Internship Info

Internship

Internship Info

DESIGN LOGO

NEWS & EVENTS

RESOURCES

JOBS & INTERNSHIPS

COMMUNITY BACK

MONTH

Lorem Ipsum Lorem Ipsum

DESIGN I

After the wire framing process was done it was time to design our own individual websites. This would allow for everyones website to have consistent layouts and grids. My first iteration was inspired mostly by websites that I found on themeforest. com. I wanted a noce long homepage with multiple sections of content. I went with a three column layout on this design as well, so that the content was easy to manage from an administrators standpoint. The three column layout also allows the page to be pleasing to the eye with the varying sizes in content boxes, it takes away from the monotany.

Randall Owens

The home page starts with the view of four aritcles scrolling on the top of the page. The navigation bar is set under the article just under the center of the screen. This is done to put the navigation and name of the school in the middle of the page so that the viewer sees this first and knows whos page they are on. Once the viewer scrolls down I wanted the login section to be up top for the registered users and the calendar on the opposing side for the users and people that to frequent the site too often. The placing of the calendar allows for non-frequent viewers to quickly find information about events on campus. From here the content of the home page falls in place allowing for the viewer to have a pleasing experience while learing more about our design school.

The article page of the portal webste also takes form the three column layout of the homepage. The calendar also stays on this page so that you can jump to a certain day to learn about the events being help then, itâ&#x20AC;&#x2122;s another way to have the pages connect to eachother. On the left side of the page are the other articles that you can get to from the news page. I wanted to keep the articles connected to eachother as another way of easy navigation between stories. The navigation also starts on the top of the page in itâ&#x20AC;&#x2122;s sticky position.

FIELD STUDY

After the first iteration of the portal was completed I conducted a study to find out how effective the design was and how easy or hard it was to navigate. The study was very succesful and helped me find out what features needed to be altered or discarded as a whole.

DESIGN II

The second iteration of the portal site was much more succesful in my opinion. I took away some features on the article page and expanded itâ&#x20AC;&#x2122;s content area. I also changed the related stories section on the article page and expanded the previous story and next story buttons. The home page was received well during the field study and didnâ&#x20AC;&#x2122;t receive too many reviews on anything that needed to be changed. The main complaint on the home page was that it wasnâ&#x20AC;&#x2122;t long enough, so I decided to expand it by adding more content in the main section. I also rebranded the UNL Design community by making a new logo.

DESIG DESIGN

DESIGN

DESIG

DESIGN

The logo design process was a tough but very fun and rewarding one. I started with a simple joining of the U and N characters and made the L of the logo a secondary color in order to distinguish the city of the school. With the second iteration of the logo I wanted to go for a very minimal design for the L while still keeping the U and N consistent with the previous design. I also added the word design into the logo as I felt it was needed to show that it was the design school rather than the university as a whole. The third iteration of the logo contains the first logo design in an italicized Gill Sans font with the word design in the normal light Gill Sans font. I also added three new design elements with the white lines to take the logo from being just a text logo to being and actual logo.

DESIG

DESIGN DESIGN

I liked the third logo design better without it beign italicized and decided to go with it over the italicized version. I felt that the logo needed more of a presence after talking to my teacher and fellow students and decided that puting the design on a colored background was the proper choice. After running this design through a field study it was concluded that the grey design was the most effective.

DESIGN DESIGN

DESIGN

DESIGN DESIGN

The home page of the second iteration is mostly the same with some very minor changes. I added more content in order for the viewer to have more of a welcoming and informative opening page experience. The logo also adds to the page in the way of giving it an actual feel of being connected to the University of Nebraska-Lincoln

The article page went the a little bit of an overhaul and it is pretty evident when you look at it. The content area is much bigger as it takes up the middle and right columns. The left column stays the same, but the bottom changes with the redesigned related stories section. This was done to allow the pictures on the page to have more of an impact with greater size and it allows the text area to not be so long and daunting.

PROCESS BOOK RANDALL OWENS