Castle

Sometimes we feel that we are stuck, completely without ideas, at this moment it is important to know where to look for inspiration, so I separated some sites that I find interesting to keep in the bookmarks.

Behance.net

Dribbble.com

Awwwards.com

Cssnectar.com

WordPress is a content management system (CMS) written in PHP that uses a MySQL database, a free, open-source website creation platform. In other words Wordpress is the easiest and most powerful blogging and website builder in existence today. In fact, WordPress powers over 39.5% of all the websites on the Internet.

With WordPress, you can create: Business websites, eCommerce stores, Blogs, Portfolios or pretty much anything.

Before jumping into any Content Management System(CMS) such as WordPress, we need to learn to plan our website before starting to code and that is where Wireframing comes in. Wireframing is a way to design a website service at the structural level by creating Wireframes.

There are 2 major types of wireframes:

Low-fidelity - Lo-Fi  are generally rough paper sketches and include the most basic content and visuals and are usually static (not interactive).

High-fidelity - Hi-Fi are highly detailed and have the details that are generally missing in their low-fidelity predecessors.

You could use a pen and paper to wireframing, it works very well in most cases. They are quick and as effective as digital wireframes. Rough sketches can communicate ideas and you can understand the flow/structure easily. But you also have the option of use a digital too to do such as: Invison, MarvelApp and, Axure. Sketch and Adobe XD can also be used for creating wireframes.

How did we apply the 60–30–10 rule?

Firstly, we had to set our color ratio based on the existing palette. We set the dominant hue (60%) to White (#ffffff), secondary to blue (#191645), and the accent color to green(#43C6AC)

We removed elements such as the name of the user, picture, and date as they weren’t useful in the context of the screen. This helps to free up real estate.

We started analysing the elements and which color each would take. The screen background and card color will remain white.

The big card containing subject information will change from its initial gradient color to our blue(#191645).

Icons and tab bars can be in our accent color green (#43C6AC)

For contrast, elements against a blue background will be white(#ffffff) to help with text hierarchy. Elements against white backgrounds will be blue (#) and a shade of grey(#888888) for hierarchy.

Dedamilola went ahead to implement the new color ratio to the screen

CSS Grid simplifies the layout of web pages.

CSS Grids: Two-dimensional layout system Easy to layout elements within the page. Flexbox or Grid? Flexbox works in one dimension while a Grid with two dimensions but both complement each other.