Welcome to the repository for the Design of Interfaces Web (DIWEB) course. This journey has been a rollercoaster, from the initial challenges to the incredible ease in design development achieved through diverse and challenging practices.
Designing interfaces at the beginning might have seemed daunting, especially with the introduction of new tools and concepts. However, as we progressed through various practices, the complexity turned into an invaluable skill set that has significantly enhanced my design capabilities.
The first practice was a true test, creating a page for the sale of tickets for the BioPark. It was my initial encounter with Illustrator, and I named my project RealBioPark.
Website:
Pages:
- Home
- Facilities
- Conservation
- Contact
Technologies Used:
- Illustrator (for design)
- HTML, CSS
- JavaScript
- CSS Flexbox
- Animations
- Responsive Design
- Parallax Effect
Focused on an ecological and environmentally conscious luxury restaurant, Broze aimed to bring a touch of prestige to web design. Integrating CSS animations for buttons enhanced user interaction and provided a more engaging experience.
Website:
Pages:
- Home
- Team
- Our Specialties
- Contact
Technologies Used:
- Illustrator (for design)
- HTML, CSS
- JavaScript
- CSS Flexbox
- Animations
- Responsive Design
Developing a tourism website for New Zealand, this practice delved into presenting the country's attractions, traditions, and popular activities. It provided a broader understanding of design principles while working on a thematic concept.
Website:
Pages:
- Home
- How To
- Routes
- Contact
Technologies Used:
- Illustrator (for design)
- HTML, CSS
- JavaScript
- CSS Flexbox
- Animations
- Responsive Design
- Parallax Effect
For ArkStudio, the focus was on a minimalistic design for an architectural studio, emphasizing the importance of content and stunning imagery. This was the first attempt at creating a Landing Page, showcasing a blend of simplicity and impactful visuals.
Website:
Sections:
- Home
- About
- Services
- Contact
Technologies Used:
- Illustrator (for design)
- HTML, CSS
- JavaScript
- CSS Flexbox
- Animations
- Responsive Design
A festive project for a ceramic studio called Damos, this practice explored minimalism and the contrast of black and white. Incorporating on-scroll animations and a Masonry grid with filtering, it showcased adaptability and responsiveness for various devices.
Website:
Sections:
- Home
- About
- Collection
- Gallery
- Our Team
- Contact
Technologies Used:
- Illustrator (for design)
- HTML, CSS
- JavaScript
- CSS Flexbox
- Animations
- Responsive Design
- Masonry grid, on-scroll animations
A special thank you to IES Zaidín Vergeles and our dedicated professors for guiding us through this challenging yet rewarding journey of mastering interface design. The skills acquired here have laid a solid foundation for creating visually stunning and user-friendly web applications.
Feel free to explore each practice's respective folders for detailed code and deployed websites.
Contact: José María Campos - jmcamposdev@gmail.com - jmcampos.dev