Escuela Técnica Superior de Ingenieros Navales

Introduction

In this project, I had the opportunity to collaborate with the Higher Technical School of Naval Engineers to redesign their website. The institution aimed to modernize its online presence, making the site more accessible, attractive, and functional for both students and the general public. I was tasked with creating the website using WordPress, following an initial design provided in Figma.

Step 1:

Analyzing the Initial Design

The first phase of the project involved analyzing the design provided in Figma, which was intended solely for the desktop version. The school’s design team had created an elegant and professional interface, consistent with the institution’s reputation and prestige. The colors, fonts, and visual elements were carefully chosen to convey a modern and technological image.

Key Design Elements:

Color Palette: Shades of blue and white, representing professionalism and trust.
Typography: Clean and readable fonts, facilitating the reading of long texts.
Images and Graphics: Use of high-quality images of the school and technical graphics to highlight the institution’s specialization.

Step 2:

Adapting and Creating the Responsive Design

Once the initial design was understood, my next challenge was to adapt it for mobile devices and tablets. Creating a responsive design not only improves accessibility but also ensures a consistent user experience across all devices.

Key Adaptations:

• Content Reorganization: Ensured that the most important content was easily accessible on smaller screens.
• Menus and Navigation: Converted navigation menus into drop-down menus for mobile devices, making site exploration easy without overwhelming the screen.
• Interactive Elements: Adjusted buttons and links to be easy to touch and use on touch devices.

Step 3:

Implementation in WordPress

With the responsive design defined, I moved on to the implementation phase in WordPress. This platform was chosen for its flexibility and ease of use, allowing for future updates and maintenance without technical complications.

Implementation Steps:

1. Theme Setup: Selected a base theme that could be fully customized to align with the Figma design.
2. Customization: Used the WordPress theme editor and tools like custom CSS to adapt the base theme to the design requirements.
3. Content Integration: Migrated existing content from the old website and added new content provided by the school, ensuring visual and stylistic consistency.
4. Optimization: Conducted speed tests and image optimization to ensure the website loaded quickly on any device.

Final Result

The result was a modern, attractive, and fully functional website that reflects the prestige and innovation of the Higher Technical School of Naval Engineers. The new website not only enhances the experience for current users but also attracts future students and collaborators.

Highlighted Features:

• Responsive Design: Adaptable to any device, ensuring universal accessibility.
• Intuitive Navigation: Clear and easy-to-use menu structure.
• Relevant and Updated Content: Information presented in an organized and accessible manner.

Conclusion

Working on this project was an enriching experience that allowed me to apply my skills in UX/UI design and web development in a real and meaningful context. Collaborating with the Higher Technical School of Naval Engineers not only resulted in a successful final product but also reinforced my ability to manage complete projects from conceptualization to implementation.