This resource allows you to quickly use CSS to animate a word or link (or other element) on your web page.
Chris Butler of Newfangled (a web design and marketing firm in NC) writes about creating user stories in the 2014 article “How to Tell the User’s Story (link to full article as at bottom of this post).
From their article:
A user story is a brief statement that identifies the user and her need. It makes an incisive abstract that can be associated with your personas. Because personas tend to be pretty general, you might have several user stories associated with one persona group. Here’s an example user story for a hypothetical industrial parts database:
“As an Industrial Facilities Manager, Cathy is responsible for maintaining production systems and sustainability, which includes keeping equipment functional. She needs quick access to maintenance information and parts supply for her facility’s entire inventory.”
Notice that the user story identifies who the user is, what she needs, and why she needs it.
Mari Pfeiffer, a freelance writer and web designer based in Southern California, shows how simply you can approach a site map. You don’t need fancy software. You can do a final version in Illustrator or InDesign if you want to, but it’s not required.
Creating a Site Map: What it is, How to Do It.
This slideshare is a comprehensive explanation of what a site map is. Slides 12-14 (out of 30) especially pertain to what we are doing in this class! Also, in order to create a good site map, you should be able to answer all of the questions on slide 26 (below). This is a great resource.
18 Great Examples of Sketched UI Wireframes and Mockups
“…it’s always a good idea to start with a wireframe. It can be a big time saver if you’re able to nail down the placement of major layout elements early on in a project. …”
Concerning Fidelity in Design
This is an informative, yet easy to read article on design methods. Tyler Tate writes that design methods are not mutually exclusive. Each method is well-suited for a particular phase of the design process, with one level of fidelity (low to high technology) often leading into the next. He backs this up with loads of examples. Read this to get a sense of where wire frames fit into the overall design process!
Media Queries showcases some lovely responsive web sites, showing at a glance what they would look like at four different sizes (smart phone, tablet, laptop, desktop).
Liquidapsive (Liqui-dap-sive) shows how the same web page responds to a changing browser size when produced using Adaptive. Liquid, Responsive, and Static layout. We’ll be building responsive web sites (layouts) in this class. We can’t cover all the UX issues.
This is a sticky side bar, and you can either use Java or CSS. For this class ill just be posting the CSS code as its simpler.
Step 1: Find a gallery plugin that you want to use for your site. It is usually best to find one with a lot of good support documentation so that if you hit a snag you can read through it to figure out what might have gone wrong.
FancyBox is one option, there are many, many others.
Since there are already well-written resources on wireframes (many of which include pictures!) I’m directing you to two articles on the subject.
This summer I designed and built a simple site for an established illustrator. She had lost all of the files to her previous site, and needed something up-and-running in a day or two.