Blog from January, 2021

Good evening! Here are a couple tips to help you when designing a new banner for your website.

  1. Contrasting fonts make a great pair. If you can match at least one font in the banner to what is currently used on your website, even better.

  2. For emphasis and impact, try bolding one word in your headline.

  3. You can even use a rectangle behind your headline to offset it from your background image.

  4. Determine where and how to align your text by looking for space with less noise in your background image.

  5. Apply a colored tint to your image for design consistency.

  6. Use one color consistently across all of the elements in your banner.

  7. Or you can use colors from your background image and apply them to your text.

  8. Try putting a frame around your text.

  9. Or try using a shape to contain your text.


Let’s talk about color and the psychology of color. Here’s a couple starting points...

Use blue to cultivate trust

Blue always makes me think of trust, peace, order, loyalty. I think of banks, insurance, HP computers, Lowe’s, and American Express.

Yellow is used for warnings

Yellow is used for warning signs, traffic signals and wet floors so be careful with this one! It can also cause anxiety but just a touch of anxiety to make a user click that button might be good in small doses.

Green is perfect for environmentally conscious businesses

Just look at brilliant earth or even Whole Foods!

Orange creates a sense of haste or impulse

Some brands use an orange alert bar which suggests urgency. Orange is also associated with physical activity, competition and confidence. A lot of sport teams and kid brands are orange like Nickelodeon or the flyers.

Black adds a sense of luxury and value

I can literally picture a sleek Apple product or citizen watch commercial with an all black background in my mind right now! Black is elegant, sophisticated, and powerful.

White is a color!

White space is so important. It creates breathability and is my favorite forgotten color.

Lastly, avoid color overload

Too many colors will create confusion and make your branding inconsistent. I don’t like laying down concrete rules because in design all rules *can* be broken, but I would try to stick with 3 colors or less.

Hey everyone! For the dev dive today, I want to talk about frameworks. Writing a complicated piece of software often means implementing functions that already exists elsewhere, which in a lot of cases would be a waste of time. After all, there’s no need to reinvent the wheel. This is where frameworks help us out – they provide a pre-built foundation for certain parts of a platform that can be built upon.

A framework is, in essence, a set of code that implements some kind of common functionality. You can think of building software kind of like making a lasagna – if you were to code everything from scratch, it would mean making your own tomato sauce, pasta, bechamel, ricotta, etc. Using a framework would be like buying all of those ingredients pre-made, allowing us to just assemble them all at the end. A good example that we use at Punchmark is called Bootstrap. Bootstrap is a framework for the front end – it gives us tools for creating designs in code that would be much more time-consuming to create otherwise.

One of the biggest things that Bootstrap does is to automatically section a webpage into 12 equally sized columns (you can see this when editing columns using PageBuilder 2). Elements can span across any number of these columns, but they’ll automatically snap to the edges of however many columns are specified. This means that as a page is resized, the layout and design of a page can resize dynamically with it. In addition, Bootstrap will let you choose how to display an element based on whether the page is being viewed on desktop, tablet, or mobile, making it much easier to create a responsive interface.

Bootstrap also gives us pre-made UI elements with a lot of built-in functionality. Dropdowns that allow search and selecting multiple options are as easy as adding a couple of words to the element’s tag. A lot of the data tables in SiteManager are built with Bootstrap as well – functions such as pagination, search, sorting, and more are all built in, meaning we don’t have to custom build every one of those functions for every page.

Frameworks also exist for back-end code. We tend not to use major back-end frameworks at Punchmark, since we’ve built most of our back end from scratch to better serve our own needs, but some popular PHP frameworks include Laravel, CodeIgniter, and Symfony. Frameworks like these can offer built-in session tools, cache, user authentication, and testing functionality.