It was my pleasure once again to present on the topic of WordPress and web design for the Emerson PB403 Web Design class this evening. Although the weather managed to get in the way of an actual in-class meeting, Google+ Hangouts proved to work quite nicely for our virtual presentation.
Below are some key points and helpful links to take away from tonight’s presentation. If you have any questions, feel free to leave a comment at the bottom of the page. I’d be happy to chat with you!
- Everything we use has design (we just don’t alway think about it)
- Skeuomorphism is a design method of coping elements of another object or material
- It’s on its way out :)
- Things like the old iOS 6 Game Center, iBooks, OS X iCal, and other textured apps are great examples of this
- Flat design is beginning to appear in websites, applications, and operating systems (such as the new iOS 7)
- Flat design makes it easier to focus on content instead of cluttered design elements such as shadows and gradients
- Icons can easily convey the same messages and ideas as detailed graphics and images
- One of my favorite free icon sites recently has been flaticon.com
- Responsive web design is key moving forward, as upwards of 30% of all website comes from mobile devices
- An excellent resource for paid premium themes (most of which are responsive) is ThemeForest, with an average cost of $45 per theme. Definitely worth the price if you plan to keep your portfolio/resume site running after class.
- Clean typography, large/full-screen background images, and bright/vibrant colors are also becoming quite popular in web design
- Retina graphics are important for the wide variety of displays your site may be accessed on, and should be used whenever possible
- Icon fonts in use with SVG icons can achieve this using simple shape-based graphics
- The icon font library generator I mentioned during the presentation was Fontastic (and I think it is pretty fontastic!)
- I’m currently developing a WordPress plugin to allow for the use of custom Fontastic libraries in pages and posts via WP shortcodes, but there are plugins available for other libraries (not custom, however) such as the Font Awesome Shortcode plugin.
- CSS3 Web Fonts allow for custom font families to be displayed on your site
- Google Web Fonts is an excellent resource for free CSS3 fonts, and many WordPress themes have support for easily adding them into your site
- One-page templates are also becoming quite popular
- Parallax web design takes layers of images and moves them at different speeds as the user scrolls up and down the page, giving a unique 3D appearance to images
- The example from the presentation was Tomato Can Blues from the New York Times
- Flash is a dying breed in web design, and is not capable of being run on most mobile devices, including all mobile Apple devices
- HTML5 and CSS3 are able to provide most of the missing functionality though, and work in all modern web browsers! :)
If you think I’ve missed something, or have any questions, feel free to sound off below! Good luck, and happy designing!