Paqart Design

New website for a creative workshop and group specialised in brand and packaging design.

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 used, 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 (using 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 that 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/

PHPProcessWireMultilanguageDesignSitebuild2014

Levegő Munkacsoport

Levegő Munkacsoport (Clean Air Action Group) is one of the best-known environmental NGOs in Hungary. My task was a redesign and moving 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.

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.

https://www.levego.hu/

PHPDrupalMultilanguageDesignSitebuild2014

TescoBaba

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 still growing. 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/

PHPWordPressNewsletter templatesDesignSitebuild2014

NeptunBrigád

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 the oldschool 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 instantly :)

Update 2018: the site was moved from WordPress to a static site created with Eleventy. It's blazing fast now and very lightweight.

https://neptunbrigad.hu/

PHPWordPressDesignLogoSitebuild2013

Letmicro

Letmicro is a T-shirt designer website - now with a brand new look!

Started out as a facelift of an existing project but soon turned into a larger-scale redesign. The customer supplied a well-thought wireframe and functional brief so we could concentrate on the graphics and on the new features.

My role was creating the visual design and the front-end development. I like this kind of combination because there is better control on the final result. We went for a clean, easy-to-digest interface that is unobtrusive but unique. Mission completed?

The site's core functionality, the flash-based Designer was also updated to make it fit into the new look. There are also plans to switch to a JavaScript or HTML5 based Designer in the near future.

https://www.letmicro.com/

DesignSitebuildEmail templates2012

The Portable Freeware Collection

Redesigning TPFC started with a small cosmetic fix but when being at it I couldn't help holding back my ideas.

TPFC is perhaps the corner of the web I visit most frequently. The site maintains the largest collection of portable freeware applications by no doubt. Its forum has a great community with like-minded people, including me.

After sending my early drafts to Andrew Lee (site owner/programmer) he set up a forum topic where we could discuss the details with the community.

The old site had a table-based layout with inline styles and JavaScripts (ouch!). As an active user it was a great challenge to get the most out of it by creating a good-looking, compact interface. Andrew did a great job on developing a compact structure during the years so complex changes were not necessary.

My biggest functional addition was to hide certain elements and make them visible with a toggle link. This way more stuff could be added without making the entry crowded. Screenshots and latest comments are now available without leaving the main listing. A Full/Compact view toggle button was also added to show/hide entry details.

Add/Edit entry pages also went through a bigger transformation:

  • consistent error messages site-wide
  • scroll to missing or erroneous input fields
  • "Test url" buttons to validate typed URLs
  • "Fullscreen edit" feature for distraction-free composing
  • The community of TPFC was also involved. Many user suggestions were built in and they also helped with providing browsing habits and spotting errors.

I'm glad I had the chance to contribute to the site this way. Go TPFC!

https://www.portablefreeware.com/

DesignSitebuild2012