Because Whinst is a very visual app, I’ve spent quite a bit of time working on it’s design/appearance. This process involved adding different design elements that have contributed to the great UI and UX on the Whinst web app. In this article, I’ll tell you about the different design elements I used.
- Images: Images make over 70% of what is found on the Whinst web app so it was very important the images were on-point. For the images I used the simple image tag. Most images are contained within a square div. The image tag layout property is set to fill and the objectFit property is set to cover.
<div className='border aspect-square w-11/12 md:w-1/3 relative'> <Image layout='fill' objectFit='cover' alt='' src={`http://some-image-source`} /> </div>- Videos: Videos make up a good part of the Whinst web app just like images. For videos I used the built in video tag, and set both height and width to a 100% in order for the video to neatly fill the div it is contained in.
<div className='border aspect-square w-11/12 md:w-1/3 relative pl-2 pr-1'> <video style={{ height:'100%', width:'100%' }} src={`http://some-video-source`} /> </div>- Input: Input tags in most applications are very crucial. In the Whinst web app they are present on login in , sign up and several different pages. I used simple Tailwindcss properties to design them.
<input className="border-2 border-gray-300 bg-white h-10 px-5 w-11/12 md:w-4/12 rounded-lg text-sm focus:outline-none" />- Grids: Grids are very important because they set the layout that the images will fit into. For the grids in the Whinst web app, I set them to adjust their size according to the device screen size. The images and videos within the grid squares also adjust according change in size
<div className="grid grid-cols-2 md:w-3/5 w-screen"> <div className="border aspect-square relative bg-white"> <video style={{ height:'100%', width:'100%' }} src={`http://some-video-source`} /> </div> </div>- Buttons: Buttons are triggers for the different functionality included in an application. It’s very important they look good and also provide some feedback to the user notifying them that the task they’re performing is complete. In the Whinst web app the button’s borders are highlighted blue when clicked on, the buttons change color when the cursor hovers over them and a loading indicator appears when the button is clicked and some functionality is triggered.
<button type='submit' className=' w-40 mb-2 px-3 py-2 text-sm font-medium text-center items-center text-white bg-black rounded-lg hover:bg-[#686868] focus:ring-4 focus:outline-none focus:ring-blue-300'> Button </button>- Modals: Modals are very important as they provide information to the user via a pop up menu instead of on another page. In the Whinst web app modals are used mainly as a warning when a user wants to sign out or delete something from the app. Modals are activated via an onclick function. The code below shows how this is done.
export default function HomePage(){
const [showModal, setShowModal] = useState(false)
const OpenModal =()=>{ if(!showModal){ setShowModal(true) }else{ setShowModal(false) } } return( <div> <button onClick={OpenModal}> </button> { showModal ? (<> <Modal/> </>):(<></>) } </div> )}With these crucial design elements now added, I’m a step closer to completing Whinst. Thanks for reading🙏.