Got Skillz? Another IntroductionJanuary 12th, 2015 | No Comments | Categories: Assignments and Tutorials. Courses: GWDB273. Topics: Inspiration. Technology: CSS, Front End Development, and HTML.
As mentioned in the syllabus and, like Creative Juice, are activities designed for you to practice, enhance, and challenge your mad web building skillz. In most cases, but not all, these activities relate to what is covered in class or in assigned readings. The goal in all this is have a place to play and experiment–which is best way to learn how to do this stuff. View article
Squeezing Creative Juices: An IntroductionJanuary 12th, 2015 | No Comments | Categories: Assignments and Tutorials. Courses: GWDB233 and GWDB273. Topics: Design and Inspiration.
As mentioned in the syllabus, Creative Juice is a collection of creative activities. Each one is an opportunity to stretch and practice your creative muscles by exploring design problems. Challenges range from graphic design oriented (ex: typography, color, layout) to new ways to find inspiration in the world around us. Creative Juice activities may be completed more than once. There is also no right or wrong way do do things. Your best bet for success is to approach the activities with a mind open for new ideas and a willingness to fail spectacularly. View article
Creative Juice: Who Ordered Hamburger From the Menu?August 4th, 2014 | No Comments | Categories: Tutorials. Courses: GWD238. Topics: Design and User Experience.
Responsive design and the mobile screen size brought with it the now-dubious hamburger icon. The idea designers are struggling with is how to reduce the screen footprint of the menu, while keeping the menu readily accessible for the users when the screen sizes shrink. There is quite a bit of discussion on the usability of the hamburger icon (some links below). If the hamburger icon is so misaligned and its usability is in such doubt, then maybe it’s time to find something new, faster, better.
Squeeze some creative juice and try to solve this problem. Design a means to shrink the menu for small screens yet clearly and obviously indicate to the user where/how to access the menu without using the hamburger icon. This is primarily about design and user experience. Sketches are appropriate. No coding is necessary. Consider testing your ideas. Show your designs to other people and ask them if they ‘get it’. You can also ask them how they would access the menu based on the design presented. View article
Create three examples of show/hide effects using the jQuery library. The challenge is to create a means for the user to toggle between hiding an element and then showing the element again. Not only does the toggle switch of button need to function properly, it also needs to look good and be self-evident to the user. In other words, the user should be able to ‘get it’ that clicking the button or link will hide/show the element being hidden/shown.
Create your examples using Codepen or using the HTML/CSS/JS trifecta of files. Don’t forget to include the jQuery library. View article
Skillz: Ugly PageAugust 2nd, 2014 | No Comments | Categories: Tutorials. Courses: GWDB223. Technology: CSS and HTML.
We’ve been picking up some CSS decorating methods like borders, border radius, colors, backgrounds, etc. The best way to get a feel for how any of these behave is to push the styles to their limits. The best way to do that is to create the ugliest page you possibly can. On purpose.
Remember: with great power comes great responsibility. Sometimes though, it’s still fun to take a joy ride slinging webs among skyscrapers. View article