The best designer is a programmer and the best programmer is a designer.

— @jolieodell

Welcome to my webdesign portfolio.

Enjoy your stay & don't hesitate to contact me if I can help you. More awesomeness in my blog.

Paqart Design.com

Paqart Design is a creative workshop and group specialised in brand and package design where I continued my career as a web designer/developer a few months ago. The previous website had some usability issues (big browser only, buggy navigation, separate content and portfolio images, etc) so the redesign was an important thing to do.

One Page Layout

I believe people would rather scroll a webpage instead of clicking on menu items to reveal subpages. That’s why a one-page layout was applied, as the quantity of content made that possible. Showcase of previous works are now right below the corresponding sections to give visual support to the content. There are jump-links to the main sections of the site and the main contact form is available from everywhere on the site. The website is also responsive.

Optimizations

Many optimization tricks were used to keep the size minimized:

  • lazy loading images, iframes, slilders and lightboxes
  • using subsets of webfonts instead of full stacks (thanks to fontello)
  • disabling extra features on smaller devices
  • merging and minimizing JavaScripts and stylesheets
  • shrinking images, CSS3 animations, htaccess tricks, etc.

As a result the website loads only about 700 kbytes when starting and even less on smaller devices. Thanks to lazy loading sliders and lightboxes, images are loaded only when the user requests them.

Wired Up

Originally we planned to use WordPress but because of its weak multilanguage support I started to look for a better solution. Finally found ProcessWire and I can say it was the best thing that could happen. Even that I was new to the CMS I felt comfortable in it in a few days. I could concentrate on the actual task instead of trying getting WordPress to do something it wasn’t designed to do.

http://paqartdesign.com/
  • html5
  • multilanguage
  • php
  • processwire
  • responsive

Levego.hu

Levegő Munkacsoport (Clean Air Action Group, CAAG) is one of the best-known environmental NGOs in Hungary. My task was to redesign the website and change the engine from Drupal 6 to 7.

The redesign was a fairly easy process. I kept the boxes from the old layout and added a full-screen sky background, making the site light and literally “airy”. The boxes got white background so they also add freshness to the site.

caag

The CAAG site before the redesign

The header is semi-transparent to allow viewing the underlying sky background image. I wanted the main menu to be more distinct and the active menu item more noticeable. That’s why I used a subtle dark blue gradient and white colours. The breadcrumb has also a white background so it nicely connects to the active menu item.

Moving content from Drupal 6 to Drupal 7 was a major issue, taking up about 90% of the time. I have to do trial and error experiments to find out what’s the best path to follow. There were about 3.500 articles in about 10 content types so I had to be careful how to solve this. Finally I used a combination of Views and Feeds modules and they did a good job though some manual adjustments here and there were required.

I have learned many new things in Drupal during the project. Though it haven’t become my top CMS now I feel more confident in it.

http://www.levego.hu/
  • design
  • drupal
  • html5
  • newsletter
  • php
  • sitebuild

Tescobaba.hu

Tescobaba.hu is a website for young parents and for those who are looking for their first baby.

Currently the site has 25000+ registered users and the number is growing rapidly. With several new articles a day it will soon become a knowledge base of pregnancy and parental information, if it is not that already. We also have prominent guest authors who regularly publish their articles, generating large numbers in visitor statistics.

New modules like searches and calculators are also added continously to provide as much information as we can.

Behind the Curtain

We had our original design for months but then we had to take over the corporate identity of Tesco Loves Baby. That was a great challenge because Tescobaba.hu is rather a portal with much more elements. The updated design looks better and feels more fresher so I regard that as a positive change.

First we had some concerns using WordPress but after all it turned out that it performed pretty well. Sometimes we scratch its limits but there is always an easy way to accomplish things and that is what makes WordPress beautiful. The site will soon reach its first anniversary and we hadn’t got any serious issues with the CMS.

http://www.tescobaba.hu/
  • html5
  • newsletter
  • php
  • wordpress

dhdentaleurope.fr

The website of DH Dental is my first live project in CodeIgniter, and as such, my first steps in MVC/OOP.

Design

I would have liked a more light site appearance but the client insisted on a dark imression. Slowly we iterated through different designs and finally we found a solution which appealed both of us.

A professional photographer was hired to make nice shots of the clinic. He did a great job, his photos make the site look and feel good. Using real images instead of stock photos also made the site more authentic.

Code

I learned a lot about CodeIgniter before starting the project to make the best out of the framework. Compared to WordPress in which I have more experiment, CodeIgniter offered much more freedom and lightweight code. Even though it is a multilanguage site (currently available in French, Russian and Hungarian languages) the code is clean, maintainable and extendable.

The ajax form and the large top slider caused some headaches but at least I will remember how to solve such challenges in the future :)

http://www.dhdentaleurope.fr/
  • codeigniter
  • html5
  • multilanguage
  • mvc
  • php

NeptunBrigád.hu

Neptun Brigád is a small theater company playing contemporary art. When they asked me for a website I knew a modern or even unusual look would fit them the best.

Trying out different concepts I was still missing the real thing. The turning point was when I found the Neptune/Posseidon background image – just what the doctor ordered! The design process sped up and the site started coming to life.

To avoid clutter I organized the plays so that each of them appears only once on the home page. Every item comes with a short excerpt and with a review chunk (if any), so they give a brief introduction to the visitors. The Masonry jQuery plugin was used to make the layout look less regular.

On the detail pages images, videos and critics are collected from various performances. Such organization allows easy information lookup and it is just perfect for this kind of content. Much better than having separate Plays, Gallery, Videos and Reviews pages, isn’t it?

A new logo was also designed. It is type-only — the “Establo” font I used is so characteristic and recognizable that I felt in love with it at once :)

http://neptunbrigad.hu/
  • html5
  • logo
  • php
  • responsive
  • sitebuild
  • wordpress