Andrea Herstowski
aherstowski@ku.edu
office hours by appointment
Google Drive
Deliverables (bookmark it)
Monday, April 1
Wednesday, April 3
Monday, April 8
Wednesday, April 10
Monday, April 15
Wednesday, April 17
Monday, April 22
Wednesday, April 24
Monday, April 29
Wednesday, May 1
Tuesday, May 7
Sophomore/Second-Year Review
Tuesday, May 7
All work from VISC 202, VISC 204, VISC 302, VISC 304 must be hung on the walls/set on tables by 9:00am, sharp. More information will be provided closer to the date. Make sure you have all the projects as you handed them in, including any process books.
If a project or process book were handed in digitally, you do not need print
Conference Website
+ 3 screens + 1 responsive
The website showcases information about the conference what it is, when, location, information about the speakers (name, credentials, title of the talk, and description), activities or workshops, schedule or pogram, registration, location (city, hotel, map), online forum, about... etc., (how to..., you are not making a workings site just design it in Illustrator for this project, focus on user experience)
Homepage. The homepage is likely the most important page on the website, the landing page / the hub for all infromation. This is the first thing users will see when they land on your website, so you need to clearly express the unique value proposition or main message of your site. You should also include a prominent call to action (CTA) on your homepage that encourages users to register and engage with other content on your site. Your homepage could also include a description of your conference.
About, Register, Schedule, Speakers.
Design 3 screens of your choice such as the homepage, conference schedule, events/workshops detail, speaker line-up or speaker highlight or map or...,
The final design should include 3 screens and 1 responsive design shown on a tablet and mobile device. Use the proper sizes and proportions. Use proper screen typography (font choice, size, contrast). Screens can scroll.
SPECS
Computer: 1920×1080 pixels (scroll)
Tablet: 768×1024
Mobile Device: 375×667
01
PHASE ONE
Content + Wireframes + Interaction Ideas
Planning, Site Architecture, Wireframes, Interaction
planning stage, no design. (discuss next week)
site architecture. start building out a site map/wireframe with content
Define all the content that could go into a website. What are the opportunities to make the experience more interactive?
Start pulling the content together.
a) location and dates
b) schedule what happens and the times for the 2 day conference.
c) pull together the content: speaker info (speakers name, speaker credentials, title of the talk, time of the talk, paragraph about the talk, photo of the speaker is optional)
d) what else?
e) how can you introduce interaction?
Use REAL information do not use place holder information start with using real info from the beginning.
Identify parts of your content could be more interesting with interactivity. Rollovers, click for more, motion...
Both static and dynamic elements of the brand can reinforce the message through responsive design, allowing visual elements to respond to user interactions such as scrolling, clicking, and rollovers. Interaction enhances the expression of the brand's values, mission, and communication, fostering excitement and evoking emotions.
*these are not designed pages they are wireframes (watch), no visuals, no system. just the text -- the plan of what will go on every page so that when you are ready to design you have all the information you need.
Watch at 10:30 https://www.youtube.com/watch?v=5wpTJl_u_Hs
Take sometime and look at websites through the lens of usability. How do you know to click on something? How do you create interaction on the page? Online you have lots of opportunities that print doesn't allow. Hidden information until you rollover or click on it, video, sound, ....
Present PHASE ONE in a way that can be easily added to your process book. Phase One =
02
PHASE TWO
Design Exploration
Testing out the kinetic system on a website.
In Illustrator, design the homepage and another page (speaker page?, schedule?... dealers choice)
Use/Expand your kinetic system to work for what you need.
Use a grid.
Don't forget about SCALE, contrast and hierarchy.
Include main navigation.
What does the nav look like when rollover it?
What sort of interaction would be on the page: does something highlight when you rollover it? change color? change into something else?
Explore 3 different Homepage ideas and 3 different designs of another page.
The page can scroll as long as you want :) just be aware of the "fold"
Present PHASE TWO in a way that can be easily added to your process book. Print to fit on 11 x 17 so you can get feedback in class. Phase Two design explorations of the Homepage and another page (x3) and interaction ideas
03
PHASE THREE
Pick best design and refine build out 3 pages.
Grid, Consistency, Web Typography...
Add one responsive screen for mobile and one for a tablet. Take any content you want to show how the design is responsive. Has to be RESPONSIVE to your website. (explore a couple options). No two columns of text on an iPhone! (you there is a reason you have never seen it) Just one column on mobile. Tablet typically has 2 columns.
Website can have more columns..
Watch this... do not worry about the photoshop or indesign just watch it to understand how to design something responsive.
Phase Two design explorations of the Homepage and another page (x3) and interaction ideas
04
PHASE FOUR
Refine design principles and typographic details, refine responsive pages and decide how you are going to present the 3 screens, mocked up, flat, how do you show intereaction?