Internet Info Magazines

Client

Internet Info: Czech on‑line publishing company with a portfolio of IT, business, finance and lifestyle web magazines

Role

Web Design / Front-End Development / Graphic Design

I was hired by Internet Info where I extended their developer team as a graphic designer, web designer and front‑end developer. I was therefore responsible for every visual work in the company such as print and online ads, logo designs or basic illustrations but the main focus laid on web design and front‑end development.

When I started in the company I was mostly creating visual layers on top of wireframes that were designed by a company’s business division focused on online consultation. I was involved in our projects from the very beginning of their creation contributing to improve usability and user experience. My growing interest in those areas helped me develop my role so that I became a web designer of all stages of our projects: initial planning, wireframing, user-flows and visual design.

Unlike print publishing where focus on content has been obvious, online publishing still needed to get there. When I joined the company, our oldest online magazine reached it’s 10th birthday. Although it meant that the publisher had been providing great content for many years and retained a huge user base, our online magazines suffered from archaic web techniques and approaches. Our magazines sites were rather complicatedthere were too many features and distractful side content. It was the time when clean and simple pages were considered as something rather wrong, lacking features, there was a tendency that every site had to look “portal” like. I invested lot of energy and effort into making our magazines simpler and focused on our users/readers. Content was put in the first place, feature bloat was eliminated, layouts were much simplified and readability was greatly improved. I definitely contributed to the company’s shift towards more design-thinking and new features and projects were much better considered and development became more focused.

For our small dev team to be able to maintain our range of project, efficiency in terms of reusable code and assets was a key to meet company’s plans and to reduce maintenance costs. From my front‑end perspective it meant that HTML code, CSS and image assets for components and pages were shared across projects from one source where possible. Code was managed via Mercurial versioning system.

Vitalia.cz

A magazine covering the topics of healthy life style and nutrition.

Logo Design / Web Design / Front-End Development

The magazine’s home page features large photos which enhances the magazine’s lifestyle look and “relaxed” experience.
The article page provides links to other recently published articles which removes the necessity of returning to the home page to read other articles.

Lupa.cz

A magazine concentrating predominantly on the Czech online scene, e‑commerce, telecommunications, online media and marketing.

Logo Design / Web Design / Front-End Development

The magazine’s home page provides a rather compact list of articles which doesn’t follow today’s design trends but users appreciated that they could quickly scan the content which was published during the day.
An article view also provides links to featured topics and recently published content.

The arrival of smartphones and more accessible mobile internet connections led to an increased number of mobile visitors to our websites. We decided to create separate mobile versions of our magazines which were stripped from unnecessary content, image and code assets and advertising, especially because at the time the Czech mobile operator's strict fair use policies and limited high-speed mobile connection coverage. The separate mobile version was data-light and needed only 4 HTTP requests to display.

Articles list
Article comments
Image gallery

DigiRoom.cz

A magazine about smart-home technologies.

Logo Design / Web Design / Icon Design / Front-End Development

The magazine’s audience were considered as readers who wants to accomplish some specific goals to improve their homes with smart technology therefore links to the main topics were introduced on the top of the page.

Podnikatel.cz

A magazine for freelancers, businesses management, start-ups and those who are considering establishing their own business.

Logo Design / Web Design / Front-End Development

One of the magazine’s main-topic sections. On the top there are links to the most important information, followed by links to useful laws, forms or calculators for the current section content.

Start.Podnikatel.cz

A microsite which provides practical step by step instructions for launching a business. Each step provides brief information about the current topic and provides links to the main server Podnikatel.cz for more specialised content.

Logo Design / Illustration / Web Design / Front-End Development

The steps navigation is designed for the site to be used as a quick reference guide.
Links to all steps can be viewed as well.

Mesec.cz

Mesec.cz is a magazine focused on personal finance, investments and capital markets.

Web Design / Logo Design / Front-End Development

The magazine’s home page views recently published articles, featured topics and tips, currency and stocks widgets. The top navigation leads to different financial section.
Each financial section (in this preview it’s “insurance”) displays navigation to specific products.
In the specific product section (in this preview it’s “car insurance”) there is a comparison table, articles about the current product and the main CTA element is to lead users to a market comparison service where products can be obtained via affiliated partners.

Prodej.Mesec.cz

A service which offers market comparison of various insurance and financial products and allows obtaining products of affiliated partners.

Web Design / Logo Design / Front-End Development

The home page hero is changed according to the season or promotional offers. Below are links to the most popular products.
Each category of financial products offers a comparison based on user’s criteria. Selected products can be immediately obtained via affiliated partners.
dribbble github linkedin file-pdf codepen