Projects · Case study 04 · Εταιρικό site · Νέο Ψυχικό
Κτιριοτεχνική
Εταιρικό site για μια τεχνική εταιρεία με δεκάδες δημόσια και ιδιωτικά έργα. Μελέτη, κατασκευή και διοίκηση έργου, με το χαρτοφυλάκιο σε πρώτο πλάνο και φίλτρα για δημόσια, ιδιωτικά και σε εξέλιξη.


Το ζητούμενο
Σοβαρότητα, χωρίς να φαίνεται παλιό.
Η ΚΤΙΡΙΟΤΕΧΝΙΚΗ ιδρύθηκε το 2009 από τρεις πολιτικούς μηχανικούς με πάνω από είκοσι χρόνια σε μεγάλες τεχνικές εταιρείες. Γενικός Εργολάβος Δημοσίων Έργων, πιστοποιημένη ISO, με έργα από βρεφονηπιακούς σταθμούς και πολυιατρεία μέχρι αναπλάσεις παραλιών και πολυτελείς κατοικίες.
Το παλιό site δεν τα έδειχνε. Ζητούμενο: ένα χαρτοφυλάκιο που διαβάζεται από έναν δήμο ή έναν ιδιώτη σε δύο λεπτά, ποιοι είναι οι άνθρωποι πίσω από την εταιρεία, και ένας εύκολος τρόπος να στείλουν αίτημα.
- 01
Το χαρτοφυλάκιο μπροστά
Κάθε έργο με φωτογραφία, έτος και κατηγορία. Φίλτρα για δημόσια, ιδιωτικά και σε εξέλιξη, ώστε ο επισκέπτης να βρίσκει αμέσως τα δικά του.
- 02
Οι αριθμοί που μετράνε
Χρόνια εμπειρίας, έργα, αριθμός ΜΕΕΠ και πιστοποιήσεις, εκεί που τα ψάχνει μια υπηρεσία ή ένας μελετητής.
- 03
Αυστηρή, όχι βαρετή
Λευκό, γραφίτης και το κόκκινο του λογοτύπου. Μεγάλοι κεφαλαίοι τίτλοι, διαγώνιες τομές, φωτογραφίες από το εργοτάξιο.
Πριν · Μετά
Ανανέωση, όχι από το μηδέν.
Η Κτιριοτεχνική είχε ήδη site, με domain, κείμενα, φωτογραφίες και πελάτες. Δεν το πετάξαμε. Κρατήσαμε ό,τι άξιζε, το περιεχόμενο, τη διεύθυνση και τις σελίδες που ήξερε το Google, και ξαναχτίσαμε δομή, εμφάνιση και ταχύτητα από την αρχή. Ίδιο domain, παλιές διευθύνσεις με ανακατεύθυνση στις νέες.
Σύρε τη γραμμή αριστερά-δεξιά για να συγκρίνεις.





hover για scroll
hover για scroll01 · Η αρχική
Τι κάνουμε, σε μία πρόταση.
«Μελέτη, κατασκευή και διοίκηση σύνθετων δημόσιων και ιδιωτικών έργων», δίπλα σε ένα έργο της εταιρείας. Από κάτω, η σκούρα ζώνη με τους αριθμούς: χρόνια εμπειρίας, δημόσια και ιδιωτικά έργα, ΜΕΕΠ. Μετά η εταιρεία, οι υπηρεσίες, τα έργα, οι ιδιοκτήτες, οι πελάτες, τα πιστοποιητικά και η φόρμα.
- Δύο κουμπιά στο hero: «Δείτε τα έργα μας» και «Η εταιρεία». Τίποτα άλλο.
- Η φωτογραφία του hero αλλάζει ανά έργο, με λεζάντα ποιο είναι.
- Αλλαγή γλώσσας EL/EN έτοιμη στο μενού για τη διεθνή έκδοση.

02 · Υπηρεσίες
Τρεις δραστηριότητες, τρεις κάρτες.
Μελέτη, κατασκευή και διοίκηση έργου, η καθεμία με δύο προτάσεις και τρία σημεία. Αρκετά για να καταλάβει κανείς τι αναλαμβάνει η εταιρεία, χωρίς να διαβάσει σελίδες κειμένου.
- Κάθε κάρτα με το δικό της εικονίδιο και την κόκκινη γραμμή του brand.
- Οι πιστοποιήσεις και ο ΜΕΕΠ αναφέρονται εκεί που έχουν νόημα, στην κατασκευή.
- «Παράδοση με το κλειδί στο χέρι», η φράση που χρησιμοποιεί η ίδια η εταιρεία.

03 · Κατασκευαστικά έργα
Δημόσια, ιδιωτικά, σε εξέλιξη.
Το χαρτοφυλάκιο σε πλέγμα: φωτογραφία, τίτλος έργου, έτος και ένα σήμα για την κατηγορία. Τα φίλτρα αλλάζουν τη λίστα επιτόπου, και κάθε έργο έχει δική του σελίδα με περιγραφή, φορέα και φωτογραφίες.
- Τα έργα σε εξέλιξη πρώτα, με κόκκινο σήμα, γιατί αυτά δείχνουν τι τρέχει τώρα.
- Νέο έργο μπαίνει από το πάνελ της εταιρείας με φωτογραφία, έτος και κατηγορία. Το φίλτρο ενημερώνεται μόνο του.
- Ίδιο πλέγμα και στη σελίδα «Έργα», με όλα τα έργα ανά σεζόν κατασκευής.

04 · Εταιρεία, πιστοποιήσεις, επικοινωνία
Ποιοι είναι, τι έχουν, πώς τους βρίσκεις.
Η ενότητα της εταιρείας λέει την ιστορία σε τρεις παραγράφους και τέσσερις φωτογραφίες, με link προς τους ιδιοκτήτες και τους συνεργάτες. Τα πιστοποιητικά ISO είναι τρεις κάρτες με το PDF ένα κλικ μακριά. Η επικοινωνία: διεύθυνση, ωράριο, χάρτης και μια φόρμα με τέσσερα πεδία.
- ISO 9001, 14001 και 45001 με το πιστοποιητικό ορατό, όχι απλώς αναφερόμενο.
- Η φόρμα ζητά μόνο ό,τι χρειάζεται για να απαντήσουν: όνομα, τηλέφωνο, email, μήνυμα.
- Οι τρεις ιδιοκτήτες με φωτογραφία, ρόλο και σύντομο βιογραφικό.



05 · Mobile
Όλο το χαρτοφυλάκιο, σε μία στήλη.
Στο κινητό το πλέγμα των έργων γίνεται μία στήλη με μεγάλες φωτογραφίες, τα φίλτρα μένουν πάνω από τη λίστα και οι αριθμοί της εταιρείας στοιχίζονται δύο-δύο. Η φόρμα και το τηλέφωνο βρίσκονται στο τέλος, εκεί που φτάνει κανείς αφού δει τα έργα.
hover για scroll


Πώς δουλέψαμε
Από τα έργα στο site.
- 01
Περιεχόμενο
Μαζέψαμε τα έργα με φωτογραφίες, φορείς και χρονιές, τα πιστοποιητικά και τα βιογραφικά των εταίρων. Ό,τι έλειπε, γράφτηκε από την αρχή.
- 02
Design
Αυστηρό πλέγμα, το κόκκινο του λογοτύπου μόνο εκεί που οδηγεί το μάτι, μεγάλοι κεφαλαίοι τίτλοι. Mockups σε desktop και κινητό πριν χτιστεί τίποτα.
- 03
Ανάπτυξη
Έργα με φίλτρα και δική τους σελίδα, πάνελ για να προσθέτει η εταιρεία νέα έργα, φόρμα που φτάνει στο email τους.
- 04
Έλεγχος και launch
Η νέα έκδοση δοκιμάζεται σε staging με την εταιρεία. Μόλις εγκριθεί, αντικαθιστά το παλιό site στην ίδια διεύθυνση.
Credits
Ποιος έκανε τι.
Δες το case study →

Το δικό σου project
Έχεις τεχνική εταιρεία ή γραφείο μελετών;
Πες μας πόσα έργα έχεις να δείξεις και ποιοι τα ψάχνουν. Θα σου πούμε πώς να διαβάζονται σε δύο λεπτά.
Δες επίσης: Συντήρηση & ανανέωση