Author Deliah Lawrence Website
UI/UX Design and Front-end/WordPress Development
Project: Redesign and develop an author's website from an existing WordPress website.
Client: Eclectic PR hired me to build a new website for their author client Deliah Lawrence
Role: Web /UI Designer and WordPress Developer.
Technologies: Pen and paper, Adobe PhotoShop, WordPress 4.7, WordPress Plugins, Notepad++, HTML, CSS, PHP. Filezilla FTP.
Platforms: Web browsers, Chrome, Mozilla, Internet Explorer, Tablet devices, Mobile phones.
Date: May 2017.
The Challenge:
The author had an existing website to promote her first novel that was incomplete and not fully designed. There were only seven webpages, about 3 of them were incomplete or missing content. Also the space on all the pages were not utilized effectively with lots of white space on each side of the content in the middle of the page. The banner image at the top of the page was also pixelated, an enlarger screenshot or cropped section of her current novel, Gotta Let It Go. Local Public Relations consultant Cherrie Woods contracted me to give the website a complete facelift with a new, clean and modern look.
Analyse the Design and Layout of Existing Website
Screenshots of the previous website on desktop, tablet and mobile phone views.
Research and Observations
Sample websites of similar authors promoting romantic suspense/thriller novels.
Research and Observations
I looked at all the pages for both websites and studied the layout, interface, mobile responsiveness, and color schemes to access what aspects of each website I think will work for my client’s website and which may not work.
I looked at all the pages for both websites and studied the layout, interface, mobile responsiveness, and color schemes to access what aspects of each website I think will work for my client’s website and which may not work.
First thing I noticed is both of these websites have more content than Ms. Lawrence’s website, including several books published, but my client only had one novel written so far. So I asked the Public Relations consult, Cherry Woods, if her client had anymore content like text or images she would like to include into her new website. It turned out she did have more content to include but she still only has one novel published.
I decided to combine the strengths of both sample websites to design and develop Ms. Lawrence’s website. I began doing wireframes and comps to share with the client incorparating the color scheme she desired. I used the theme layout of the Eric J. Dickey’s website and the warmer color tones of Brenda Jackson’s website.
Low-fi Wireframes
I did quick sketches of what the client's new website could look like with the new layout I decided on. After this I took screenshots of Eric J. Dickey's website and opened it in Adobe PhotoShop to use as a background and guideline to layout and design comps on top of it for Ms Lawarence new website.
Low-fi Wireframes with pencil and paper.
Client's Design Choice
The client chose comp number 6 to move forward into the next stage of web development.
Customized Code and Images to Recreate Website.
After the client agreed on the design and color scheme of her choice I looked in the source code for Eric J. Dickey's website and used Chrome's Developer Tools to implement the HTML and CSS that matches the design for Ms Lawrence new website.
Next step was to customize the theme colors, layout and content by editing the WordPress CSS Customizer, optimizing and uploading new graphics and photos, and customizing the HTML and PHP code in Notepad++.
Full view of the home page for the complete redesign of author Deliah Lawrence's website.
After many revisions of tweaking specific colors, spacing, customizing the CSS, HTML and PHP code, and adding content the website was finally complete and ready to stand in the midst of other websites for authors of similar genres. The client is happy and satisfied with the new design and can now have more confidence in promoting and driving potential readers of her book to her website.
New plugins were install and activated for the contact form, photo gallery in the Gallery page and the signup form for the newsletter.
Full length of the Home page.Color scheme is shades of red, burgundy, with orange highlights and touches of gray, black text on white and light colored backgrounds.
Screenshots of Webpages in Desktop Browsers
iPad Screenshots
iPhone/Android Device Screenshots
