Design UNL Process Booklet by Lauren Simonsen

Design UNL Portal Process Booklet Lauren Simonsen Publication Design Spring 2014

Project Goal

As an exercise in large-scale web development, you will work as a â&#x20AC;&#x153;class development teamâ&#x20AC;? to design a communications portal for all design students at UNL. The primary goal for this site is to create a one stop source for (in the order of importance): jobs, internships, news, events, resources and ideally to foster a design community. A core concept we will be focusing on is UCD or user-centered design. User-centered design is a design philosophy that puts the user of a product, application or experience at the center of the design process. In UCD, a designer strives for a detailed understanding of the needs, wants and limitations of the people who will use the end product and then makes design choices that incorporate this understanding. UCD requires that designers not only analyze and foresee how users engage but also test their designs.

The First Step The first step of the project was to meet with our group and design one section of the site. I was apart of the Internships section. We designed our wireframes with a simple format that could be easily applied to any other section of the site. On the left was an open column where for internships we could show the latest internship listings. Then when you are o nthe internship listings page, that left column turns into a search section. On all of the home pages there would be a large featured image with a featured article. Below that would be a four column grid that could house other related articles that fall within whatever section of the site you are in.

Group Wireframes First Wireframe

The Second Step The second step when wireframing the site, was to gather every other groups information that they had found for their section of the site.

Group Wireframes

Gathering Other Groups Wireframes and Information

JOB

INTERNSHIPS

NEWEST JOBS

TIPS

DESIGN JOB TIPS

Chelsea Boreyko GreyBox Creative

Selbert Perkins Design Graphic Designer

RESUMES

CONNECT

5 Ways to Get Job Recruiters to Come to You It's easy to be overlooked as a job seeker.

The good, the bad and the ugly

When you apply for a role advertised by a company, you're probably competing against dozens, if not more, for the position. . On top of that, you're likely submitting

New York, NY Graphic Design UNL ALumni

Greater Boston Area

JOB

RESOURCES

FEATURED ALUMNI

more listings >>

We’re looking to hire a designer with both interactive and print experience. In a designer, we want someone who can take direction . . .

Prepare to Job Search Career Services helps you conduct a successful job search. We review resumes and cover letters, conduct mock interviews, and provide advice on...

Here's What Google Really Looks For When It's Hiring

apply | save

DO YOU NEED A WEBSITE?

We’re seeking a hands-on self-directed Sr. Designer / Art Director that understands strategic design and branding This is an ongoing ... apply | save

MassMedia Corporate Communications Art Director Las Vegas, Nevada MassMedia is seeking a full-time Art Director for its growing creative department. The Art Director provides graphic design and creative . . .

The GreyBox marketing design team has built its reputation on delivering high quality, branded solutions in a range of industries and in a variety of formats. Although GreyBox Creative is a newly formed marketing communications agency . . .

How to Respond to the Salary Question

JOB RESOURCES Linkedin Behance

CreativeHotlist

PORTFOLIO BOOK

The question "What are your salary requirements?" can strike fear into theeager hearts of...

What to include and what to leave out

Simply Hired

10 Basic Job-Speak Terms Working Newbies Need to Learn

16 Major Dos and Don'ts at a Job Interview

SUBJECT RESUME BOOK WEBSITE INTERVIEW

POPULAR TITLES

where they often get lost in the resume black hole.

Graphic Designer

TIPS

The 25 Most In-Demand Job Skills Recruiters Are Looking For

Phone and Skype Interviews Increasingly, interviews are conducted remotely. Prepare for a phone or skype interview just as you would for a regular interview. Identify your strengths and weaknesses for the position and prepare for typical interview questions. Additional planning and preparation can make these alternatives more successful.

DO YOU NEED A WEBSITE? TO INCLUDE THE OBJECTIVE OR NOT TO INCLUDE THE OBJECTIVE? THAT IS THE QUESTION WHAT TO SHOW IN YOUR PORTFOLIO WHAT TO KNOW ABOUT THE COMPANY YOU’RE APPLYING TO

ARCHIVE 2014 MARCH FEBRUARY JANUARY 2013 DECEMBER NOVEMBER

apply | save

AIGA

Krop Creative Jobs

JOB

INTERNSHIPS

TIPS

SEARCH KEYWORDS

TIPS

POPULAR TITLES

RESOURCES

CREAVITE FIELD

CONNECT

DO YOU NEED A WEBSITE?

DEADLINE

LOCATION

Selbert Perkins Design Graphic Designer

LOCATION

Greater Boston Area

TO INCLUDE THE OBJECTIVE OR NOT TO INCLUDE THE OBJECTIVE? THAT IS THE QUESTION

May, 10, 2014

WHAT TO SHOW IN YOUR PORTFOLIO

We’re looking to hire a designer with both interactive and print experience. In a designer, we want someone who can take direction . . .

STATE CITY

OUTSIDE TIPS WHAT TO KNOW ABOUT THE COMPANY YOU’RE APPLYING TO

apply | save

CREATIVE FIELD

Graphic Designer

ALL

5 Ways to Get Job Recruiters to Come to You

We’re seeking a hands-on self-directed Sr. Designer / Art Director that understands strategic design and branding This is an ongoing . . .

EXPERIENCE JUNIOR

HOW TO NETWORK OFFLINE

April, 20, 2014

Florida

by Business Insider

4/01/14

apply | save

It's easy to be overlooked as a job seeker.

PART-TIME

MassMedia Corporate Communications Art Director

FULL-TIME FREELANCE INTERNSHIP

When you apply for a role advertised by a company, you're probably competing against dozens, if not more, for the position.

Las Vegas Nevada

June, 15, 2014

resume black hole. "Unfortunately, most job seekers never hear back about an application unless by some miracle their details come up in a

MassMedia is seeking a full-time Art Director for its growing creative department. The Art Director provides graphic design and creative . . .

and the job seeker has far more ability to call the shots — especially around salary," Slezak explains.

apply | save

That's why getting a recruiter to approach you may be your best chance at landing a job. But this is no easy feat. We asked career experts what you can do to get them them to come looking for you. Here's what they said: Independent human resources consultant Jay Canchola says if you have a reputation for being an "expert," Slezak agrees. He says stand-out candidates are those who write for industry blogs, attend and participate in speaking engagements, and ultimately "create a bit of professional buzz on social media." "These are the types of people recruiters set their sights on," he says. "It might mean getting outside your comfort zone. But if you want to become sought after, it's what you'll need to do." 2. Build and engage with your network. "This is about leadership, initiative, and getting involved in your industry and community," says Deborah Shane, a career author, speaker, and media and marketing consultant. She says people naturally refer and recommend others who they follow, have a relationship with, and who they respect."Networking is by far the most important activity in the career and business worlds, both in person and online. It should be strategic, purposeful, and fun," she says..............

Comments

JOB

INTERNSHIPS

TIPS

Graphic Designer Greater Boston Area

Selbert Perkins Design spdnew.selbertperkins.com Collaborating with clients from Dallas to Dubai, Selbert Perkins Design translates a place’s story, history and personality into a design experience that inspires and makes people go “wow.” SPD does everything from logos to . . .

Current Openings Graphic Designer Greater Boston Area

Senior UI/UX Designer Playa Del Rey, CA

Alumni Chelsea Boreyko Graphic Design UNL

Degree of Seperation Professor Colleen Sryon

RESOURCES

SAVE APPLY

Job description

We’re looking to hire a designer with both interactive and print experience. In a designer, we want someone who can take direction but also add something to the mix. You must have impeccable attention to detail and be thoughtful and organized in your production skills. You should have a proven experience bridging the gap in print and interactive. Portfolio should include a breadth of experience in Photoshop, Illustrator, InDesign and basic knowledge of Flash and CSS/HTML. We expect to see strong attention to brand details and conceptual skills.

What we look for in a portfolio

- Strong typographic skills - Conceptual abilities - Appealing aesthetic style - Three-dimensional/environmental work is a plus - Demonstration of strong process - Attention to detail

Responsibilities

- Concept and implementation for interactive and print designs - Stay aware of technical and creative trends and best practices across the spectrum - Understand our clients; brands and marketing objectives

Desired Skills and Experience Requirements

- Expert-level experience with Photoshop, Illustrator and InDesign - Basic Knowledge of Flash and CSS/HTML - At least 1-3 years of print and interactive design experience (including internships and/or freelance work) - Willingness to learn and stretch - Strong communication skills (written & verbal) - Creativity, enthusiasm, sense of humor, team spirit, commitment, and professionalism

Featured Item

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Resources

Lor em ipsum dolor

sit amet, consectetur

turpis et purus laor

eet consequat. Nulla ut ar

cu in lacus ultricies

vulputate ac. Fusce sagittis turpis et quam pellentesque, quis tinci

Link

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

A e nean sed tincidunt ante. Quisque venenatis dui lectus vehicula sed

Typography Web Design Imagery TutorialsP ublications Links Submit

Latest Typographic

adipiscing elit. Fusce quis

porttitor . Ve stibulum pellentesque egestas est, ut fringilla tellu

e lit, quis semper

ublications

8 )

T ype: General

unt magna facilisis.

IMAGE

Location: Lincoln, NE 6850

Admission

SELECTED EVENTâ&#x20AC;?

Admission Cost: (price

Sample text about even t

BAC K

magery

IMAGE

IMAGE Event s

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

TutorialsP

On Campus

Web DesignI

. (image name/description)

IMAGE

Link Lorem ipsum dolor sit amet, consectetur adipiscing elit.

dafont.com

Events

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

fontbook.com

fontsquirrel.com more

IMAGE

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

houseind.com

losttype.com

On Campus (1st - 7th) Lorem Ipsum Aenean luctus lectus ac iaculis mattis. Pellentesque venenatis sem vel quam molestie accumsan. Phasellus blandit massa eget orci auctor pellentesque. Date

Lorem Ipsum Aenean luctus lectus ac iaculis mattis. Pellentesque venenatis sem vel quam molestie accumsan. Phasellus blandit massa eget orci auctor pellentesque. Date

Lorem Ipsum Aenean luctus lectus ac iaculis mattis. Pellentesque venenatis sem vel quam molestie

myfonts.com Dates & Deadlines Ut condimentum velit nec imperdiet Duis ultrices lacus vel eros mollis Ut ac risus vel justo

Color Key/Event Type Lorem Ipsum Lorem Ipsum

IMAGE

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

Lorem Ipsum Lorem Ipsum

The Third Step Once we had gathered the other groups information, we had to design wireframes for the entire site on our own. This was probably the most challenging part when it came to wireframing the site because each group had designed their initial wireframes in completely different ways. I chose to stick to my groupâ&#x20AC;&#x2122;s simple design of having a featured image and article on the home page of every section of the site. And below that are four sections to have related articles or news stories. There would always be a column on the left to house any addition information or links to other pages that would be relivant. Even though it isnâ&#x20AC;&#x2122;t illustrated here, the navigation would be a simple drop down from the header.

Group Wireframes

Create Consistent Wireframes

Group Wireframes

News and Events Page

Group Wireframes

Job Listings Page and Job Listings Inside Page

Group Wireframes

Internships Page and Internships Listings Page

Group Wireframes

Internship Listings Inside Page

Group Wireframes

Testimonials Page and Company Profiles Page

Group Wireframes

Company Profiles Inside Page

Group Wireframes

Resources Page and Inner Typography Section

Group Wireframes Jobs: Tips Page

Group Wireframes Inside Article Page

Group Wireframes Tips Inside Article

Group Wireframes

Community Page andCommunity Inside Student PagePage and Inner Student Profile Page

My revised wireframes are dramatically different to what my group originally set up. When I started thinking about the design, I mainly focused on what I as a student would want: • Clean • Easy to Understand • Modern and Cool • Most Recent News is Easily Accessable Home Page • The home page would be a three column grid containing boxes that show the most recent news and events, articles, and job/internship listings etc. • Each box would either have a picture with it or a solid block of color. • When you click on a box, it will take you to an inner page that has all the information about said event, article, job/ internship listing, etc.

Revised Wireframes

Home Page

Inner Page â&#x20AC;˘ Inner pages will work with that same three column grid system. The example wireframe is two collumns wide leaving space on the ride to ad addition information and/or links to other related pages.

Revised Wireframes Inner Page

Features of my Initial Portal Design Home Page • The home page is a series of boxes containing the most recent articles, job openings, events, etc. • Each box has an image to go with it. If an image can’t be found, a simple block of the bright color will be used to keep the site looking fresh and exciting. • When you hover over a box, the image becomes under exposed and more information about that specific article or event slides up. • If you click on the box, you are taken to the an inner page where you can see all the information about said event, job listing, or article.

Initial Portal Design Home Page

Navigation • The navigation is a simple drop down navigation located in the sticky header. • When you select a different section, the screen looks exactly like the home page, except the only boxes seen relate to whatever section you are in. • To go back to the home page, you simple click Design UNL in the header. Inner Page • The inner pages keep to the same three column demintions as the home page. For example, the inner page seen at the right is two columns wide leaving a third column open on the right to display other related information. • There is an area below articles for people to leave comments. • At the bottom of the page is a section where related articles can be easily accessed. • When you are on the job/internship listings pages, you can filter what boxes you want to see with tags such as local, out of state, paid, unpaid, etc. There is also the option of a simple list view if you’d want a printable version.

Initial Portal Design

Navigation and Inner Page

Usability Study

The entire class were to interview 5 or 6 students fromt the art college, half of them being BAs and the other half BFAs. The background questionnaire that everyone was asked had the following questions to be answered on a scale from 1 to 10. Would you like to have a website like this? How helpful would you find it? Please rate the importance of the following features: • Profiles of prospective employers (sample portfolio, website link, mission) • List of potential employers • List of current job openings • LIst of summer internship opportunities • Interviews & samples from past interns • A news & events area that gives you the latest around campus • Calendar of events, grant deadlines, competition deadlines • Students in the Interactive Design I class are given a personal portfolio website and blog, would you use this? • Should every graphic Design student have this? • Would you participate in a series (1-3) of weekend or Friday afternoon classes to learn how to customize your portfolio? • Should every Art student be given a portfolio site? • Resources for art, fonts, plugins • Training site, video, learning blogs From all the people I interviewed, they would love a site like this. I interviewed 2 BAs and 3 BFAs. My questions for my personal design are as follows on a scale from 1-10. Is the design and layout of the site attractive? 9- 1 10- 4 If this site existed, would you want to use it? 8- 1 10- 4 Is the navigation easy to understand? 9- 1 10- 4 Is the site user friendly? 9- 2 10- 3 Is it important to have a calendar on the homepage? 7- 1 9- 2 10- 2

Findings & Recommendations Findings and Recomendations

We found that of all those who were interviewed, 53.4% were Seniors 27.2% were Juniors 13.6% were Sophomores 5.6% were Freshman 42% were BAs 50% were BFAs The Jobs and Internship Opportunities had the Highest Ratings while the News and Events had the lowest. When asked if all design students should have a portfolio site, 80% said they would use it. At the bottom of my questionnaire I had a section for them to write down any other comments they may have about the design or features of the site. They are as follows: -Would have liked to see how the community page would look, think that would be a great addition but looks awesome! -Love the site! This could very easily become my homepage! -Typeface? on articles maybe serif, easier to read -Forward and Back buttons -Could some of the images move or be more interactive? something to make it more special. -Is it responsive? From this feedback, I feel that I need to find a way to incorporate a calendar on the home page and add forward and back buttons to help navigate through articles. I also need to change the font style on the article pages. I might possibly design the community page just because it is a special feature that I want to show. I will also try to incorporate the UNL â&#x20AC;&#x2DC;Nâ&#x20AC;&#x2122; into the header or footer, just to keep it associated with our school.

Final Portal Design

Minor Changes to the Final Design Home Page â&#x20AC;˘ On the footer of every page I added the University of Nebraska - Lincoln logo so the site is affiliated with the university.

Final Portal Design

Home Page

Navigation • On the header, the section you are currently in will be underlined so you know where you are at. Inner Pages • On the inner pages I changed the typeface to regular so it is more readable, and I added call outs to break up the long article. • In the far right column that used to be just open space, I added the most recent job listings since this article would be found in the jobs section of the site. There is also a more jobs button so you can easily navigate to the job listings page. • I also added previous and next buttons above the article so you can easily get back to where you just were, or move forward to the next article in line.

Final Portal Design

Navigation and Inner Page