73 Less Fugly Epicenter
1 like579 views
This document summarizes the process of designing and developing a website called Epicenter. It discusses selecting a meaningful name, creating a custom font and logo, designing pages and elements, integrating backend functionality, optimizing performance, and hosting the site on Amazon AWS. The developer aimed to create an engaging design while ensuring technical quality, browser compatibility, and reducing "fugly" elements through iterative testing and feedback.
73 Less Fugly Epicenter
- 1. 74% Less fugly The Making of Epicenter by Romans Malinovskis, Agile Technologies
- 2. About me ‣ Started computers at age of 10, in 1991 ‣ Developing commercial software since 1995 ‣ In Web applications since 1998 ‣ Started Web Developer team in 2003 ‣ Incorporated in Ireland in 2007 My role in Agile: ‣ Architect SaaS application and Web interfaces.
- 3. About Agile ‣ We develop web software for businesses ✓ Online financial, accounting system, SaaS ✓ Client Self-service portals ✓ Integration with backend software ‣ We do not sell Web Design ✓ but we know a lot about it ✓ stunning design is a must for web software
- 4. Fugly vs not fugly How big is the difference?
- 13. loads fast graphics's nice content is good colours navigation google friendly works in all browsers ..not only on PC
- 14. 50 25 75 0 100 Fugly
- 16. 50 25 75 0 100 Fugly TODO: fix next year
- 17. Name ‣ Use a name with a meaning: ‣ epicenter ✓ ground shaking ✓ volcano ✓ so many people that ground shakes. ✓ accumulate stuff and then erupts in the instant, reshapes the ground
- 18. he just sent me this.. he likes volcano.
- 19. Designer’s response ‣ “epicenter” definition ✓ The point of the earth's surface directly above the focus of an earthquake.
- 20. Customer is always wrong... ‣ Do you tell your dentist how to do his work? ‣ Why would you tell designer how to do his work? ✓ stops creativity and innovation ✓ subjective opinion of few individuals ✓ no research or study ✓ often based on competition ✓ the missing link
- 21. Sorting out fonts ‣ Lowercase font is better in our case, because it simply looks better.
- 22. And the winner is ‣ Custom font “Thonburi”
- 23. Customising our font ‣ we need equal letter spaces and to fix shape
- 24. Creating symbolism: ‣ Scale font down so that second “e” would be in centre and with highest contrast
- 25. Explanation
- 26. Variations
- 29. Add black
- 31. Creating a Style ‣ Expand the idea behind a logo ✓ Different contexts and backgrounds ✓ Different situations ✓ Smaller logo ✓ Event pass design ✓ Business cards
- 34. Business Cards
- 35. Icon
- 36. Event pass
- 37. Finally - on the web
- 38. Newsletters ‣ Our task is to collect people e-mails for newsletter ‣ However also try to get feedback from them
- 39. ‣ Save email ‣ and through jQuery transition ‣ askfor extra details
- 40. Browser Compatibility ‣ Standard compliant ✓ Firefox ✓ Webkit (Safari, Chrome) ‣ Compliant but looking uglier ✓ Opera ‣ Compliant to it’s own standards ✓ IE6, IE7
- 41. Testing ‣ Button clicks during transition ‣ SQL injection ‣ Stress-testing
- 42. Back-end
- 43. Now to the main site ‣ Nailing down requirements ✓ dependencies, entities, constraints ✓ use scenarios ‣ Merging with our concepts ✓ Colours ✓ Circular shape ✓ Feel
- 44. First Concept
- 46. Client interaction ‣ Do not show previews to client ✓ gets client involved too early ✓ pointing out known flaws ✓ change of direction
- 47. Problem ‣ Where should we put context?
- 48. Solution ‣ two styles - combined
- 49. And the bottom part
- 50. Dynamics ‣ Multi-page navigation ‣ Dynamic / AJAX
- 51. Where to put speakers? ‣ Not enough space...
- 52. Finalised design
- 53. Full-text pages
- 56. Backend ‣ Structures for sessions, speakers, days, time schedule ‣ Dynamic generation of all pages ‣ Photo management ‣ Plaintext editing for some texts ‣ Rich-text editing for other content
- 57. Backend
- 58. Coding ‣ Writing in PHP5 ‣ Using Agile Toolkit 3 ‣ Integrating with templates ‣ Implementing non-javascript verison ‣ Working on closed domain
- 59. Coding
- 60. Resulting PHP code ‣ Admin ✓ Approx. 250 lines of code (excluding libraries) ‣ Front-end ✓ Approx 400 lines of code ✓ Ticket form: 50 lines ✓ Widgets for map and panorama view ✓ 600 lines of JavaScript
- 61. Google friendliness ‣ Basic SEO principles ✓ If you don’t promote your website, it won’t be ranked ✓ Make way for Search engines ✓ Direct links to AJAXified articles
- 62. AJAX + Google ‣ <a id=”link” href=”/otherpage.html”>..</a> ‣ $(‘#link’).click(function(ev){ ev.preventDefault(); .. }); ✓ Links works properly on browsers without JS ✓ Links work fancy with JS browsers ✓ Google ignores JS ✓ Direct links
- 63. AJAX vs Regular regular link ajax
- 64. Speakers tweet ‣ Show their 3 last tweet ‣ Refresh every few minutes ‣ Update dynamically ‣ Test for non-JS browsers ✓ (tweets disabled) ‣ Direct links and AJAX ‣ Highlight links and tags
- 65. Hand-drawn icons
- 66. Something Nifty ‣ We have to add something unique and cool ✓ Try1: Make icons go on circular trajectory and fade in ✓ Try2: Make logo bounce when clicked ✓ Try3: Shake logo when move mouse over ✓ Accidentally made all screen shake. Liked it. ✓ Bonus - 4th shake is more violent and makes icons fall ✓ Dropped icons can be found in “about” box. Later removed
- 67. Text flow ‣ Revisetext entered by client. Fix spaces between paragraphs. Make everything consistent ‣ Position images ‣ Add panorama image ‣ Add Google maps ‣ Add Booking form
- 68. Booking form ‣ Javascript form - but message for no-JS browser ‣ Calculate prices, totals and discounts dynamically ‣ Offer gifts for 3-day pass ‣ Allow to add multiple visitors for same compnay ‣ Ability to remove visitors. Later disabled. ‣ Integrate with Pay-Pal ‣ Save data into database
- 69. Optimisation ‣ All browsers with at least 3% market share ‣ Check in older browsers, IE5, Firefox 1, Opera 6 ✓ Looked good in those until we did IE6 optimisation ‣ Disabled stylesheets ‣ Disabled images ‣ Disabled JavaScripts
- 70. No images - still readable
- 71. Eircom.ie with no images
- 72. no js, no img, no css
- 73. Stress-testing ‣ Main page: 90 requests / sec, no caches or optimisation ‣ Over 100 req/sec on other pages ‣ Eircom main page: 1000 requests / sec (cached) ‣ Eircom article page: 10 req / sec ‣ Wordpress: 20 req / sec ‣ Twitter: 3 req / sec
- 74. Hosting ‣ Amazon AWS, E2, Europe ‣ Located in Dublin ‣ 25ms latency from Eircom DSL ‣ www.eircom.net latency from Eircom DSL - 30ms ‣ hosting365: 25ms latency
- 75. Hosting ‣ Gentoo Linux, 32-bit, (Xen) ‣ Dual 2.33 Mhz CPU ‣ Apache 2.2, PHP 5.2 ‣ nginx ‣ MySQL 5.0 ‣ Security enhancements
- 76. Total work ‣ 25-30 man-days (Total) ‣3 people in team
- 77. Our opportunity ‣ Try new and experimental things ‣ Collect data through google analytics ‣ Portfolio ‣ Test framework features
- 78. The Result 50 25 75 0 100 Fugly-o-meter
- 79. 73% less fugly ‣ Time for questions... ‣ Romans Malinovskis