Costin Dudescu - Styling Your Home

This project came from the necessity of publishing and creating a website around the work of art of Costin Dudescu and that is of building, designing and refurbishing old homes or abandoned houses into living spaces where people spend most of their lives. The projects are coming alive and are tailored according to the character of the owners and based on the laws of Harmony found everywhere in Nature.

UX

The website was created for Costin Dudescu, to show his work through pictures, and for the visitors of his site that are interested in refurbishing their old homes or want to build new ones, but they want something to stand out and be a reflection of their character.

My idea for creating the site evolved from the projects of Costin Dudescu and also using a minimalist approach in the design of the site. The core elements are the pictures of projects like the dicton "a picture is worth a thousand words". I focused on selecting some of the best pictures to showcase what it can be done for the visitors and potential customers to enjoy, firstly, watching this projects coming alive, but also, secondly, to inspire them and possibly redesign their homes.

User stories

Alexandra

• As a user, I want to be able to understand from the first page what the site is about and how can it help me to build my house, which is the the first thing that made me visit this site. I want to be able to see some of the projects of Costin Dudescu and also to find out about him and his story, so that I can make my mind if to call him and use his services or not.

Alin

• As a user experiencing the first time this site, it seemed very well adjusted to my mobile Iphone5, and I was able to navigate easily through the pages and read the content. As a software tester working in Bucharest, I didn't find any problems testing the site at different resolutions and I was impressed with Costin's work.

Lucian https://github.com/Walachul/CostinDudescu_MilestoneProject/commit/929dd15436265b7391617fa8339dec55c958df22#commitcomment-30753389

I can give FB links to the profiles of the users above

Features

Existing features

Home page - index.html

1. Costin Dudescu logo - allows users to come back to the home page by clicking on it
2. Navigation - home, about, projects and contact is the main navigation and allows users to go to the specific pages and find about what they are interested in.
3. Home page, index.html, allows users to view a small gallery by clicking on each image to open a larger image. Also, by reading the content, they will know what is it all about and what services are offered.
4. The footer is divided in 3 sections, ABOUT, where users get to know a little Costin Dudescu, SOCIAL, where they can view his profile on Facebook, Linkedin or view his gallery on Pinterest, and CONTACT, where they can email him or call him.

About page - about.html

5. Users get to read what Costin Dudescu does, how he does it and the principles that are the foundation of his work. They can also view a deisgned staircase.

Projects page - projects.html

6. In this page, I used the dicton "a picture is worth a thousand words" and I tried to select for each of his services offered the representative pictures, creating a gallery for each of them.
7. Users can click on each of them to see them in full size. The gallery was remade with modals from Bootstrap, so that the users don't have to exit the page and then go back to were they Also, the images were edited for web, and the small versions are thumbs.

Media page - media.html

8. Users can view a video reportage made by a local television from Spain of one of Costin Dudescu' projects in Asturias.

Contact page - contact.html

9. If they have a project in mind and want to implement it, users can contact Costin Dudescu through a contact form, by submitting their email address with the details of their project.

Features left to implement

• Creating galleries with JavaScript for the images exposed on the site
• Creating links to FB profiles, Linkedin and Pinterest
• Connecting with JavaScript the contact form with an email address

Technologies Used

HTML 5

To create the skeleton for the web pages of the project.

CSS3

To style the HTML elements.

Bootstrap 4.1.3

Framework to create the project, using the responsive grid system they use, mobile-first, and other classes for elements used in this project.

JavaScript

Used JavaScript for the hamburger menu (navbar-toggler) for the responsive menu on mobile from 992px and below.

Testing

The testing process was conducted with Google's Chrome responsive tools, by launching the project in the first of bootstrap's breakpoint, XS, viewing how the elements on that page work (the links are targeting the correct pages, the selected images that are nested in the anchors work and open the bigger image(s)) behave and arrange themselves , choosing from the UX point of view the best arrangament, modyfing classes, adding or removing classes from bootstrap or using my own style, and then proceeding through the next breakpoint , repeating the same process up to bootstrap's XL breakpoint.

After each test with Google's Chrome dev tools, I deployed my respective page (e.g. index.html) to GitHub repository, and the GitHub pages so as to view my respective page on my mobile and see how it behaves.

The process's pattern went on for the other page's of the project, namely about.html, projects.html and contact.html until I was sattisfied with the final version.

Deployment

The project is deployed to the platform GitHub Pages. After creating a local repository, I have mainly pushed the pages (index, about, projects and contact) and the other files(css,images and readme), after adding the content, styling and testing of the main pages.

Credits

Content The content was created mainly by me.

The principles of Vetruvius I got from here Architecture in Web Design: Applying Vitruvius’ Principles

Media All of the images and video are the work of art of Costin Dudescu.

Acknowledgements

I received inspiration for choosing the colors by following the guildes of How to Choose a Good Color Scheme For Your Website

The creation of the projects page with gallers was inspired by A-rr