73 Less Fugly Epicenter

865 views
785 views

Published on

Published in: Technology, Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
865
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

73 Less Fugly Epicenter

  1. 1. 74% Less fugly The Making of Epicenter by Romans Malinovskis, Agile Technologies
  2. 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. 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. 4. Fugly vs not fugly How big is the difference?
  5. 5. loads fast graphics's nice content is good colours navigation google friendly works in all browsers ..not only on PC
  6. 6. 50 25 75 0 100 Fugly
  7. 7. 50 25 75 0 100 Fugly TODO: fix next year
  8. 8. 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
  9. 9. he just sent me this.. he likes volcano.
  10. 10. Designer’s response ‣ “epicenter” definition ✓ The point of the earth's surface directly above the focus of an earthquake.
  11. 11. 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
  12. 12. Sorting out fonts ‣ Lowercase font is better in our case, because it simply looks better.
  13. 13. And the winner is ‣ Custom font “Thonburi”
  14. 14. Customising our font ‣ we need equal letter spaces and to fix shape
  15. 15. Creating symbolism: ‣ Scale font down so that second “e” would be in centre and with highest contrast
  16. 16. Explanation
  17. 17. Variations
  18. 18. More associations
  19. 19. Add black
  20. 20. Creating a Style ‣ Expand the idea behind a logo ✓ Different contexts and backgrounds ✓ Different situations ✓ Smaller logo ✓ Event pass design ✓ Business cards
  21. 21. Picking background
  22. 22. Environment testing
  23. 23. Business Cards
  24. 24. Icon
  25. 25. Event pass
  26. 26. Finally - on the web
  27. 27. Newsletters ‣ Our task is to collect people e-mails for newsletter ‣ However also try to get feedback from them
  28. 28. ‣ Save email ‣ and through jQuery transition ‣ askfor extra details
  29. 29. Browser Compatibility ‣ Standard compliant ✓ Firefox ✓ Webkit (Safari, Chrome) ‣ Compliant but looking uglier ✓ Opera ‣ Compliant to it’s own standards ✓ IE6, IE7
  30. 30. Testing ‣ Button clicks during transition ‣ SQL injection ‣ Stress-testing
  31. 31. Back-end
  32. 32. Now to the main site ‣ Nailing down requirements ✓ dependencies, entities, constraints ✓ use scenarios ‣ Merging with our concepts ✓ Colours ✓ Circular shape ✓ Feel
  33. 33. First Concept
  34. 34. Attention to detail
  35. 35. Client interaction ‣ Do not show previews to client ✓ gets client involved too early ✓ pointing out known flaws ✓ change of direction
  36. 36. Problem ‣ Where should we put context?
  37. 37. Solution ‣ two styles - combined
  38. 38. And the bottom part
  39. 39. Dynamics ‣ Multi-page navigation ‣ Dynamic / AJAX
  40. 40. Where to put speakers? ‣ Not enough space...
  41. 41. Finalised design
  42. 42. Full-text pages
  43. 43. Backend (meanwhile)
  44. 44. Backend (meanwhile)
  45. 45. 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
  46. 46. Backend
  47. 47. Coding ‣ Writing in PHP5 ‣ Using Agile Toolkit 3 ‣ Integrating with templates ‣ Implementing non-javascript verison ‣ Working on closed domain
  48. 48. Coding
  49. 49. 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
  50. 50. 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
  51. 51. 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
  52. 52. AJAX vs Regular regular link ajax
  53. 53. 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
  54. 54. Hand-drawn icons
  55. 55. 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
  56. 56. Text flow ‣ Revisetext entered by client. Fix spaces between paragraphs. Make everything consistent ‣ Position images ‣ Add panorama image ‣ Add Google maps ‣ Add Booking form
  57. 57. 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
  58. 58. 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
  59. 59. No images - still readable
  60. 60. Eircom.ie with no images
  61. 61. no js, no img, no css
  62. 62. 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
  63. 63. Hosting ‣ Amazon AWS, E2, Europe ‣ Located in Dublin ‣ 25ms latency from Eircom DSL ‣ www.eircom.net latency from Eircom DSL - 30ms ‣ hosting365: 25ms latency
  64. 64. Hosting ‣ Gentoo Linux, 32-bit, (Xen) ‣ Dual 2.33 Mhz CPU ‣ Apache 2.2, PHP 5.2 ‣ nginx ‣ MySQL 5.0 ‣ Security enhancements
  65. 65. Total work ‣ 25-30 man-days (Total) ‣3 people in team
  66. 66. Our opportunity ‣ Try new and experimental things ‣ Collect data through google analytics ‣ Portfolio ‣ Test framework features
  67. 67. The Result 50 25 75 0 100 Fugly-o-meter
  68. 68. 73% less fugly ‣ Time for questions... ‣ Romans Malinovskis

×