Processbook by Alysia Dirks

PROCESS BOOK Portal Design Alysia Dirks

BRIEF

This project was focused on designing a portal site, specificially a Design portal site. The site would accomplish being a one stop shop for design students in the areas of news & events, jobs, community, internships, and resources. We broke up into about 5 groups and focused on an area of the portal site that would be important to have. My group focused on the Resource page. We gathered resources that we use normally and ones that we found doing research. We divided the resource page into different categories depending on interest within design: Typography, Web Design, Imagery, Tutorials, publications and links. These areas of the section would help with any design issues you came across or just external sites that would help with the design process. As a whole we each designed, in our groups, the main 5 sections of the Design portal site:. We found it important that the portal site had a way to make the design portray what our department is all about.

Group

WIREFRAMES

These wireframes were done with a group of 3 interactive design students. The goal was to find a logical way to go about creating the UNL Design Portal. My group focused on making wireframes for the Resource page of the portal site. This included finding what content would go on the Resource page, the navigation, how many pages it would be, and how it would be designed.

Class

WIREFRAMES

These wireframes were made applying the system, data and content from the other 4 groups wireframes. We were to use the wireframes we did as a group and make them look cohesive as one portal site.

DESIGN UNL

Resources NEWS

JOBS

INTERNSHIPS

RESOURCES

Typography Web Design Imagery TutorialsP ublications Links

OMMUNITY

Latest Resources Link

Latest Updates

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

IMAGE

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

IMAGE

Link Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link

Typography

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Featured

IMAGE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus risus eu sem tincidunt volutpat. Duis et massa eget ante lacinia

Community

Internships

Jobs

IMAGE

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus risus eu sem tincidunt volutpat. Duis et massa eget ante lacinia more

Web Design

Imagery

IMAGE

ARCHIVE

DESIGN UNL

News

mment title

Lorem ipsum dolor sit amet, consectetur a ipiscing e it. Duis condimentum, mauris et volut at ultrices, sapien felis varius li ula, sit amet sodales arcu i sum sed mauris. Etiam at laoreet tortor sit amet imperdiet libero. Inte er sodales neque et dolor tristique mattis. Vestibulum in uam non sapien ringilla condimentum. Ut consectetur iacu is erat, i consequat erat frin illa sed. Vesti u um ante ipsum primis in ci s rci l ct s et ltrices posuere cubilia Curae;

Lorem ipsum o or sit amet, consectetur a ipiscing e it. Duis con imentum, mauris et vo ut at ultrices, sapien elis varius ligula, sit amet so a es arcu i sum se mauris. Etiam at aoreet tortor sit amet imper iet i ero. Inte er so a es neque et o or tristique mattis. Vesti u um in uam non sapien ringilla condimentum. Ut consectetur iacu is erat, i consequat erat ringilla sed.

Events Calendar

News & Events On Campus

Local

Dates & Deadlines

Lorem Ipsum

IMAGE

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

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

Featured Event

Date

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dapibus risus eu sem tincidunt volutpat. Duis et massa eget ante lacinia more

Calendar

l L

d l

DESIGN ONE

This is the first design of the two pages that I designed for the portal site. I believe this design needs more white space, the typography isnt consistent in size and style, and the grid is too busy. This design was the start of a good idea. From what I was told, boxes that were supposed to go together didnt look that way. Also the color scheme i have for this design is so neutral and there isnt a lot of color, so that will change.

DATA STUDY

For portal sites, we design for people. The design needs to be user centered. So we did a usability study on our design to see how people thought of it and if it would work for a portal site.

GROUP DATA

Senior: 53.4% Junior: 27.2% Sophmore: 13.6% Freshmen: 5.6%

BA: 42% BFA: 50% Like Idea: 40%

Good Idea: 86% Jobs & Internship opportunities: highest feature News & Events: Lowest feature

Design Wise Who would use this site?

72% would use this All Design: 80% would use this All Art & Art History: 76% would use this Interactive Design 1:

5 People I surveyed 3 BA 2 Non art students Total of 88 People were surveyed overall

DESIGN FEEDBACK I found from the questions that I asked that people found my design to be great, but the navigation to be hard. They found that the grid was hard to read and there needs to be more white space. My designs were rated from 7-10 all the way through. I mostly got positive feedback from my designs. Many of the suggestions was to change the colors/show more white space-same as the critique on wednesday. Some found the grid to be to cluttered and I think I found a way to break it up. Definitely adding more white space has made the design to be more open and less cluttered looking and dark. Need to change: Less cluttered more white space make colors more vibrant Keep hierarchy same throughout to show fluidity make the grid less confusing

DESIGN TWO

This is the final design for the Portal site. I wanted the design to be more cohesive with each fectured section. The text and image that go together have similar colors to make the design be less busy. I had trouble with the grid being so busy, so I made the typography and color conhesive in each featured section. The hierarchy of type also makes the grid less busy and gives the viewer less to focus on.

NEWS

JOBS INTERNSHIPS RESOURCES COMMUNITY

TYPOGRAPHY WEB DESIGN IMAGERY TUTORIALS PUBLICATIONS LINKS

Website Inspiration Explore here

HOW TO DO MORE WITH LESS..WEB DESIGNS WEEKLY FREEBIE Psd Mockup Files

+ LINKS Behance »

FREE PATTERNS FOR DOWNLOAD

Issuu » Visual.ly »

TYPOGRAPHY INSPIRATION

Print Magazine » Creative Market » Smashing Magazine »

402-472-5522 402-472-9746 artdept@unl.edu

2014 University of Nebraska–Lincoln Lincoln, NE 68588 | 402-472-7211 About UNL | comments?