Continuing on the TPAN rebrand/redesign project, I’ve fleshed out the mockup a bit more, since I was actually a bit ahead of the game last week. I’m including images that could potentially be used on the site. Not much else has changed. See more after the jump.
Show & Tell: Brand New
Being a design geek, I dig checking out the newest brand refreshes as they’re released. On the blog Brand New by the design firm Under Consideration, they present the latest brands, review them, and let the design community weigh in.
The real star here is the comments section. I know we’ve all trained ourselves not to read the comments (because, you know, you’d like to keep your blood pressure in check and not have a stroke), but the commenters here are usually on their game with comments that are either well thought out or a bit whimsical. It’s safe to read the comments. Really, it is.
Rebrand Project: TPAN Mockups
For my mockups, I decided to use the new (so new it’s still in beta) Adobe Experience Design (Adobe XD for short). It’s a great tool to quickly prototype a website, and includes UI elements for Windows 8.1/10, iOS, and Android, along with robust tools to get you working quickly. Check out the mockups after the jump.
Rebrand Project: Construction Paper Prototype
As part of the rebrand/redesign project, we were tasked with creating a prototype out of construction paper. This was kind of a fun part of the project! The results of my construction paper prototype are shown below, after the jump.
Rebrand Project: Personas, Scenarios, and Page Goals
The next phase of the rebrand/redesign project is to create personas of a typical user of the site we’re redesigning, complete a scenario of a typical use of the site, and define page goals. After the jump, check out my Personas, Scenarios, and Page Goals worksheets.
Show & Tell: CSS-Tricks
CSS-Tricks always has informative articles about new CSS features and methods, as well as an ever-evolving ‘almanac’ of CSS selectors and properties and how to use them.
CSS-Tricks has got to be, hands down, one of the most interesting and useful resources on the web I have ever found. As CSS has evolved, so too have the methods of doing things, and CSS-Tricks keeps you up to date with the latest.
The site also has an ‘almanac’ feature, where you can lookup CSS selectors and properties. They then show you how to properly use the selectors and properties to achieve the results you’re looking for.
Show & Tell: Typewolf
Typewolf is one of my favorite new design websites out there. Typewolf shows you what is trending in type, and great pairings of typefaces for use on the web.
Another feature of the site shows font alternatives to popular commercial fonts that you can use on the web. There are features such as “Top 10 Helvetica Alternatives,” “Top 10 Futura Alternatives,” and so on.
You can even search their site for font alternative suggestions, and for great pairings.
Redesign/Rebrand Website Project
For my redesign/rebrand project, I am choosing TPAN, which is the Test Positive Aware Network – a community-based service organization that provides HIV testing to the community, and comprehensive health and wellness programs to everyone impacted by HIV/AIDS.
And we’re back!
If you’ve read this blog before, you know it was used for my Website Design I class at Columbia College Chicago in the fall semester of 2015. It’s now the start of the fall 2016 semester, and I’m re-using this blog for my Website Design II class. What you’ll be seeing here is, hopefully, interesting posts related to the web and web design.
EXTRA CREDIT: Reflecting on the class
Before I began the Website Design I class here at Columbia College Chicago, I knew that this would come fairly easy to me, having been dabbling in website design since the days of nested tables and Internet Explorer’s dominance. What I didn’t expect was to learn a thing or two of why I code some of the things the way I do. I think it had become second nature to me to copy things that worked from other sites, and implement things from tutorials, but I didn’t always understand why they worked.