Restaurant Menu Editor

Menu image generator for La Perle Noire.

This is a simple application built on ProcessWire and html2canvas.js for creating menu images to post on Facebook.

The client requested a Microsoft Word template to edit weekly menus and save it as an image. I suggested another approach instead: an online editor. Even though it took more time to develop it was worth the trouble. It's very easy to use even though it has bilingual content.

It takes only a few steps to create a menu:

  • load an existing menu
  • double-click on a line to edit in a front-end editor lightbox
  • enter meal details and save
  • click on the Preview button and if all's fine, then click on Download
  • share on Facebook (or use elsewhere)

I'm happy I could convince them and that it's working great for years now.

PHPProcessWirehtml2canvas.jsDesign2016

Lelkes Design

The Lelkes family members over several generations succeeded in distinguished effort in their contribution to the arts in the fields of painting, sculpture and other arts.

Their new website is showcasing their works and their biography, including a tribute page to their grandparents.

There are hundreds of artworks uploaded with many custom fields and it's still easy to manage them thanks to ProcessWire, even for the client.

UIKit is used for the most front-end stuff, including lightboxes, scrollspy, offscreen menu and even sliders. It was a joy to work with and provided a solid foundation.

http://lelkesdesign.hu/

PHPProcessWireUikitDesignSitebuild2015

Obstermann's

Obstermann's is a new gummy candy brand on the market featuring 100% natural ingredients. Their new website is also free of artificial flavors but still eye-candy :)

We were after a catchy but mature web design because one part of the site is a general introduction while others are for kids and parents. The bold top menu and the slight radial gradient play nicely together and create a nice frame that suits well for both purposes.

Product pages share the same graphical elements but they are a bit more playful thanks to the various pets and fruits floating around. The main slider is also of a kind that one simply can't stop clicking on it because it just feels so great :)

http://obstermanns.com/

PHPWordPressMultilanguageDesignSitebuild2015

La Perle Noire

La Perle Noire is a stylish restaurant and lounge on Andrássy Avenue, Budapest with quality French and Hungarian cuisine.

The website features a large slider showing artistic gourmet dishes, the modern-age interior and the renowned outer garden. Images play a major role establishing the elegant atmosphere of the website as they are really outstanding. Take a look at the Photo Gallery and you will surely understand why.

Responsivity was one of our main goals as more and more visitors come from handheld devices. Both the site and the table reservation service can be easily reached using mobile phones or tablets.

http://laperlenoire.hu/en/

PHPWordPressMultilanguageSitebuild2014

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