After completing the five basic prototype page designs for the Craigslist website redesign project, I began the coding process, starting with the homepage. This step involved translating the designs into functional HTML and CSS using Adobe Dreamweaver.
Initial Challenges and Lessons
As I started coding, I encountered several challenges. One major difficulty was ensuring that the design translated seamlessly onto different screen sizes, maintaining responsiveness across devices. Bootstrap became an invaluable resource during this stage. Its library of examples and pre-designed components provided inspiration and practical solutions. By referencing these examples and customizing them to align with my design, I managed to streamline parts of the process.
However, there were areas where I struggled to replicate my exact prototype design. For example, certain layout details proved difficult to achieve using the tools and techniques I was familiar with. After multiple attempts, I decided to temporarily modify the design to make progress on the project. My plan is to revisit and refine these sections after completing all the pages.
Coding Other Pages
Following the homepage, I applied the same approach to the other four pages: About Us, Helpdesk, What’s New, and For Sale. Each page presented unique challenges, particularly in maintaining consistency while adapting elements to fit their specific purposes. For example, ensuring text alignment and achieving the desired positioning of images required trial and error. These challenges taught me valuable lessons about debugging and troubleshooting layout issues.
The Journey of Responsiveness
Responsiveness was a recurring theme throughout this process. Achieving a design that looks good on both large desktop screens and small mobile devices required meticulous adjustments. I learned to use CSS media queries more effectively and to structure my HTML with flexibility in mind.
Creative Problem Solving
An interesting aspect of this process was discovering alternative solutions when faced with design limitations. For instance, when a certain prototype feature couldn’t be implemented as planned, I explored new ideas that not only worked but also enhanced the overall user experience.
Looking Ahead
This blog highlights the process of coding the initial versions of the redesigned pages. It’s not yet about the final refinement but rather the journey of turning prototypes into functional pages. The next blog will delve into the polishing phase, where I revisit unfinished details and ensure the pages meet both design and usability standards.
Comments
Post a Comment