Git Product home page Git Product logo

ucd-project-2's Introduction

Dalí's Surreal Dreams (UCD Project 1)

Tribute to Salvador Dalí's Surreal Dreams

The aim of this site is to present the great artist Salvador Dalí and his works in a simple and interactive way. Users can discover his life and his artworks, learn about surrealism, and they can also access other relevant and interesting materials about Dalí and his art. If you wish to dive into the surreal world, this may be a good place to start and get know the main principles through the great artworks and extraordinary life of Salvador Dalí!

Responsive Layouts

Deployed site (Github Pages) : https://sofiahorvath91.github.io/ucd-project-1/
Technologies : HTML + CSS
Software : Visual Studio Code

UX

1. User stories

  • Expectations as a user :
    • be able to navigate through the site easily through any device.
    • be able to learn about the life of Dalí.
    • be able to understand the principles and see examples of Dalí’s art.
    • be able to understand the basics of surrealism.
    • be able to navigate to other relevant sites for more information.
    • be able to leave my feedback and/or ask my questions regarding the site/content.
  • Expectations as a site owner :
    • the site to be tastefully and creatively designed (regarding the subject).
    • the site to be clearly structured for easy navigation.
    • information to be clear and interesting.
    • the visual content to be rich and relevant.
    • the users to get attracted to Dalí’s art and surreal artistic style

2. Strategy

  • Purpose of Project
    • To promote the art of Dalí;
    • To educate people about the surreal art.
    • To get people dive further in this topic by directing them to additional resources.
    • To encourage people to develop their imagination by presenting them the surreal way of seeing the world.

3. Scope

  • I wanted a simple, evident and user-friendly UX experience.
  • I wanted clear and informative content.
  • Regarding the subject, I wanted a visually appealing and creative design.
  • Information about:
    • the exceptional life of Salvador Dalí;
    • the different artistic works of Dalí;
    • the surreal art and way of thinking;
    • where to find further resources in the given subject;
  • Ways to provide feedback to site owner for constant UX development.

4. Structure

  • The layout is simple and clear to ensure the easy navigation through site content by users
  • The navbar is clear, visible and responsive with matching site logo and dropdown clearly indicated to facilitate navigation through pages.
  • The content is easy to read and the sections are clearly distinguished on each page, with section titles highlighted.
  • The Index page displays clearly the site’s main subject (Art & Life of Salvador Dalí) and allows to navigate to main pages of site.
  • The Biography page presents the life of Dalí, using collapsible sections for avoiding too crowded content and for facilitating navigation.
  • The Art Gallery is consisted of three pages through a dropdown menu (Gallery, Museums and Other Works), allowing the discover Dalí’s artworks via different aspects.
  • The Surrealism page presents basic information about the surrealist art in general, and also allows users to discover other famous surrealist painters.
  • The Feedback page allows users to leave feedback, questions and rating about the site, enabling site owner to further improve the site’s UX
  • In the Footer, users can find the sources and copyrights of different contents used to create the site, all completed with hyperlinks toward the original source, as well as icon buttons to share site on different social media platforms.

5. Skeleton

The very basic skeleton of the site was modelled by Wireframes via Balsamiq, and during site development, additional design elements was added for better UX.

6. Style

  • Design & Colours
    • When planning the project, knowing that a rich visual material (photos and paintings) will be used as illustration, I wanted a simple, almost minimalist design and colour theme for the background and UI elements. Therefore I chose a basic black and white design with simple blue (#0000ff) and red (#ff0000) highlights. I prepared the background wallpapers with Photoshop, using free png/svg images.
  • Font Selection
    • The main font type was chosen with Google Fonts and is used across the whole of the website: Averia Serif Libre. This is a well readable yet a bit dream-like font type which suits well to the theme of the site.

Features

1. Existing Features

  • Navigation Bar
    • Featured on all pages, the navigation bar includes links to all subpages and is identical on each page for smooth navigation. The navbar is fully responsive on all screen sizes: for smaller devices, a hamburger navbar view is included with the help of Bootstrap for better UX and easier navigation.

Navbar on Desktop
Navbar desktop Navbar on Mobile
Navbar mobile

  • Index page
    • Attention-catching site title and visually backed up links to the main site pages (Biography, Art Gallery, and Surrealism) for easier navigation

Index Page
Index Page

  • Biography page
    • For simple design and easy user navigation, the biography of Dalí is divided into four collapsible sections, summarizing the different chronological periods of his life, with a slideshow gallery of his paintings made in the given period included in each section as visual backup. The sections are titled after a famous painting made during the highlighted period, and these section titles are highlighted upon hovering and opening. An audio file can be also played by users to provide further insight into Dalí’s life : a part of a radio interview made with him in 1958 by Mike Wallace, where he talks about genius, personality, the subconscious and dreams. Users can also navigate to the full interview if are interested in it.

Biography Page
Biography Page Biography Collapsible Section
Biography Section

  • Art Gallery pages

    • The Art Gallery part of the site is consisted of three pages, which can be reached through a drop menu item and which present different sub-categories of Dalí’s artistic heritage. The dropdown option is indicated in the navbar, and the dropdown items are styled to be readable and visible in all cases.

  • Art Gallery pages : Gallery page

    • This page features an image gallery of 45 selected works of Dalí. Upon hovering, the users can see the name and creation date of each painting. The gallery is fully responsive on all devices, varying the number of columns to show based on screen size. Users can also watch a video which features 933 of Dalí’s works with musical background on the page or on Youtube, and may also follow a link to Wikiart where they discover all of Dalí’s works.

Gallery Page
Gallery Page

  • Art Gallery pages : Museums page
    • This page presents the all the museums world-wide which hold a permanent Dalí collection in a styled table. For each museum, an image, a description, a link toward the museum’s site, and the museum’s location included with link to Google Maps. The table design is fully responsive, adapting to the screen size of any device. Users can also watch a video of the Dalí Museum (Floride, USA) on the page or on Youtube, and may also follow a link to the Dalí Museum’s Yotube channel to find more similar videos.

Museums Page
Museums Page

  • Art Gallery pages : Other Works page
    • This page features The Andalusian Dog, the only short film directed by Dalí (together with director Luis Buñuel) and the two biography books written by Dalí himself. Users can watch the full short film on the page or on Youtube, and also redirect to Amazon to buy the books online and discover other related literature.

Other Works Page - Films
Other Works Page Other Works Page - Books
Other Works Page

  • Surrealism page
    • This page allows users to learn more about the surreal art in general and about other famous surrealist painters (Ernst, Magritte, and Picasso) with visual illustrations of their works to awake interest. If interested, users can navigate to their full Wikiart page to discover their life and art. As a page main illustration, a dynamically rotating, styled image is used which presents well the essence of surrealism I think.

Surrealism Page - Description
Surrealism Page Surrealism Page - Other Painters
Surrealism Page

  • Feedback
    • This page consists of a responsive form with two fieldsets, allowing users to leave their details (name, email, phone, the level of their knowledge about Dalí), and a rating with comment regarding the site’s quality, content or just to have a question. Only some fields are required for submission, all marked with an asterix, for not discouraging users from leaving a feedback, and if they change their mind, they can clear all fields.

Feedback Page - First Section
Feedback Page Feedback Page - Second Section
Feedback Page

  • Footer
    • The footer section includes sources and copyrights for all content used to create the page with external hyperlinks to the sites. This encourages users to dive deeper into the subject through other websites and to get know other great resources and artists. The footer section allows to share this website with other people through social media sites and email via social share buttons.

Footer
Footer

2. Future Features

  • Modal boxes for allowing see gallery images in bigger version
  • Another dropdown item in art gallery for sculptures

Code validation

1. Automated tests

2. Manual tests

  • Desktop
    Mozilla Firefox, Google Chrome, Microsoft Edge: pages are working fine and have the corresponding style.
  • Mobile
    Tested with Samsung A5, iPhone 5, and iPad, and webpage works well, responsive as intended and no style deformations.
  • Mozilla Developer Tools
    Tested for available devices, webpage works well, responsive as intended and no style deformations.

3. Accessibility tests

The entire website was verified about accessibility using Wave. No errors found, alerts related mostly to image titles (which is used to show the painting name and creation date to users).

4. Bugs and Solution

Playing the video files on mobile device may be problematic, as it does not only depend on the code, but also on the settings and capacities of the device what the user uses. Therefore, if the file could not be played on a device/browser, a Youtube link included for all videos, allowing users to watch the video in a different window if interested, without closing the actual site.

Deployment

The site was deployed to GitHub pages (find it here) after building it with Visual Studio Code and pushing it to GitHub Repository via GitHub Desktop.

  1. GitHub repository => Settings => GitHub Pages
  2. Source => Selecting Branch + Folder (main/docs)
  3. With branch/folder selected, the page refreshes to show deployment status

1. Forking Repository

By forking the GitHub Repository, the user can copy the original repository in his/her own GitHub account, allowing the user to view and/or make changes without affecting the original repository.

  1. Open GitHub => GitHub Repository
  2. Top of Repository => Fork option
  3. Copy of the original repository appears in your GitHub account

2. Local Clone

  1. Open GitHub => GitHub Repository
  2. Under Repository name => Clone or download option
  3. Clone Repository using HTTPS => Clone with HTTPS => Copy URL
  4. Open Git Bash
  5. Current working directory => Choose location where you want the directory to be cloned
  6. Type git clone, and then paste the URL copied in Step 3.
    $ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY
  7. Press Enter

Credits

All content / visual / media material used to build the site is referenced and copyrighted in the footer of the corresponding page.

1. Content

Salvador Dalí’s quotes used as page titles and subsection titles / elements: GoodReads

2. Media

Pictures were treated with Photoshop and tinyPNG to have a better size for online presentation.

3. External Codes used as source / inspiration

4. Acknowledgements

  • To the Code Institute for the great course material
  • To the Stack Overflow & W3Schools as a valuable resource for solving issues.
  • To all the wonderful artists, organizations and programmers who provided great source materials
  • To Salvador Dalí, for being such an extraordinary person and wonderful artist!

5. Special Thanks

  • My mentor Rahul Lakhanpal for his time, kind words and support.
  • My previous private mentor Samu Gábor Tamás who taught me all I know in the last two years
  • My Mother who is always there for me

ucd-project-2's People

Contributors

sofiahorvath91 avatar

Watchers

avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.