Creating a mojoPortal skin is relatively easy, as CMS systems go. However, it’s not just pick colors, click a button, and go. There are various considerations to keep in mind, and steps to go through in order to achieve maximum results. Today in Part 1, we’ll cover the foundation elements for creating your mojoPortal skin.
If you’re an experienced designer, you’re probably already familiar with the 960 grid system; the good news is that you can still use it in designs for mojoPortal skins, so don’t try to constrain yourself to the 3-column layout that is the default for mojoPortal; we’ll cover how to implement layout variations in later parts of this series.
If you’re not quite as conversant with 960 grids and the like, take some time to Google 960-grid layouts, and hop over to Simon Designs, to download their free 960-grid .psd template. Having a template like this to lay out your design format is an absolute lifesaver.
So – you’ve got your grid, but what about your colors? Hopefully, your client has already provided collateral (logos, print media) with branding and colors to help narrow down the field. If not, I highly recommend perusing the options over at Design Seeds; they have a great feature that allows you to select a main color, and search for matching color palettes – brilliant! Once you’ve found your palette image, save it – it’ll come in handy in a bit.
Typography is a big feature in most modern web design; with the advent of actual web fonts, we’re no longer shackled to the lowest common denominators. Two of the best sites to choose your web fonts from are Google Web Fonts and Font Squirrel; both have the advantage of offering a wide array of free fonts to choose from.
Choosing a primary and complementary font isn’t always easy; if you’d like to know more about how to choose fonts that work well together, check out Type Connection, an online edu-game that shows you how to choose font pairings in a fun and informative fashion. mojoPortal supports web fonts very well, so embrace the options!
So – you’ve got your grid, you’ve got your colors, and your fonts – what about your graphic elements? Are you going for an infographic style, or more photorealistic? This is where you consider things such as your target demographic, the purpose of your site, and other factors to be considered with your client.
When we come back, we’ll cover how to take your static design, and begin to transfer it to a living template in mojoPortal.