How to Design a Portal Website

Designing a portal website home page (a page that acts as a doorway to a large amount of content) can be an extremely challenging web design project. The nature of a portal means that the home page is constantly changing and is packed with links and content. The trick to designing an accessible and easy-to-use portal page is to create a website layout that facilitates frequent content change, but remains consistently styled for ease of reading and navigation. If you don’t get it right, you can end up with a cluttered page that’s hard to read. The good news is, the web design experts at MB Web have extensive experience of designing portal websites for schools, businesses and government institutions, including East Sussex County Council’s innovative Services to Schools online ordering system. Read on to discover some of the key factors that we consider when designing portal websites…

Portal Website Design: Layout

When considering how best to approach a portal website design, we’ll generally begin with the layout. If we’re designing a page that’s going to be full of links and information, we’ll typically use as much of the page width as possible by eliminating left-hand margins and unnecessary spaces. Of course, as responsive web design is at the heart of everything we do, we would also make optimum use of space regardless of the device that the website is viewed on. Also, centre-aligning content and graphics on a portal page never really works very well, as users tend to start reading at the top left and scan quickly down to the bottom right.
The best portal web design approach is to use boxes and shapes to break the page down into easy-to-read chunks. We tend to use a combination of long grey rectangles, square panels with lighter colours for news sections, and magazine-style columns for community and leisure information. A small, bold font (10px Verdana) tends to work well with these kind of page sections and stands out against the background colours and shapes. Links are often highlighted in familiar shades of blue and orange, with icons sometimes used to provide the user with additional visual information about what will happen when they click on a link.
Find out how we can help

Portal Website Design: Background’s

The next obvious design elements to consider are background images and colours. Using a subtle, pastel-coloured background is a good way to provide some texture and depth to the portal page, but if the background is too busy or has too much colour and shadow it can end up looking like a website from the 1990s. Things become more problematic when the colours that sit on top of the portal background are too strong. A typical example of this is when we are tasked with re-designing portal websites that use large amounts of cyan. Some colours simply don’t work on computer screens, cyan being one of them. Using it as an accent colour can be quite effective, but covering large areas of the web page with it can lead to issues with readability.
For portal website page layouts, it’s often a good idea to use pale backgrounds with dark text, or the occasional dark background with pale text – along with ofter tones over heavily saturated ones. From our many years experience of designing information-heavy websites, we tend to find that using blues and greys as strong colours tends to be extremely effective on news and portal websites, as they are easier on the eye and provide better contrast for a more comfortable reading experience.

Portal Website Design: Graphics And Images

Careful consideration is given to how we utilise graphics and images. If a logo is poorly designed or the images are too small or are incorrectly aligned with the text, it can make the portal web page look unbalanced and disorganised, as well as unprofessional. As brand strategy design is the cornerstone of our digital design business, we know how to design logos and graphical elements that not only align with your content, but also align with the wants and needs of your target audience.
When designing portal website layouts, we also aim to keep additional elements such as jQuery news scrollers and sliders to a minimum. Although these generally work very well, they can have a negative effect on page loading times and can cause page errors or flickering. It’s better to have a dedicated news panel using plain HTML for the sake of readability, but also because scrolling text can distract from the page content in the same way that banner ads or animated graphics often do.
Our ultimate goal when designing portal website layouts is to create a responsive, accessible and easy-to-use information hub that not only looks great, but is also able to effortlessly convey a large amount of information to it’s readers. In order to achieve this, we generally find that a magazine-style portal web page layout works well. It may be a well-used formula, but that’s because it’s an extremely effective means of conveying information quickly and efficiently.
Find out how we can help

Top Five Tips for a Polished Portal Website

Efficiency

If you need a lot of content on one page, reduce margins and borders to reclaim every spare pixel for use with the content. Break your layout into panels and space them about 10 pixels apart. Use fine line-work and small bold fonts, and give the panels 10-15 pixel internal padding to keep the text away from the edges.

No Wallpaper

Background images are fine, but be careful how you use them. If they are too busy or repeat too much, the end result just looks messy. Take particular care to avoid embossed images when designing portal website graphics; simple 2D web graphics look much cleaner and more professional. Always remember that the background should never compete for visual attention with the foreground – especially on information websites.

Easy Navigation

The nature of a portal page means it’s full of links. However, most portals are broken-down into subsections and these should always be easily accessible through a prominent navigation bar. Try placing these links at the top of the page or down the left-hand side, and repeat them in plain text at the foot of the page for added idiot-proofing.

Calm Colours

Colour is a fundamental part of interface design, and designing a portal website is no different. Avoid using bright, saturated colours like cyan. if you like bright colours try them at 10-20% if they’re in the background, or use them as accent colours for subtitles, links and CSS rollovers. Try and use muted colours for boxes and backgrounds: greys work well with virtually any colour scheme.

Avoid Gizmos

Every web designer loves jQuery; it’s a fantastic JavaScript library and we use it to great effect on many ecommerce web designs and CMS websites, but that doesn’t mean it should be used on every website. JavaScript widgets and scrollers can slow down web pages and can cause issues with older web browsers. They can also look a little tacky if overused. If what you have to say is important, you should say it clearly and confidently without scrolling it past the user like the red-dotted LED display at your local Post Office.
Designing a portal website is easy; designing a great portal website is hard. It requires experience, creativity and design talent to create an information resource that is informative while remaining accessible and intuitive to use. So if your school, community organisation or business would benefit from a beautifully designed, responsive and accessible portal website design, contact MB Web today to discuss your project.

About MB Web

MB Web is a web design, SEO (Search Engine Optimisation) and digital marketing agency based in Lewes, East Sussex, and with offices in Sussex, Surrey, London and Kent.
To talk to us about your web design, SEO or Branding project, contact James Golding on 01273 478822 or simply send us an email instead.